Owlcarousel2: Video previews collapse to 0 height

[hoppithek]

Hi I noticed a problem, when using videos in the slides

http://jsbin.com/nalefevogo/1/edit?html,css,js,output
(notice the extra css, to prevent 0 height, remove it and you see the problem)

This happens due to preview images set as background image with the container set to 100% height, but with no explicit height value set in a surrounding box this collapses to 0 height.

Using min-height: ... as in the example just chagnes the problem as responsiveness is kind of destroyed this way. A better approach might be a real img element for the preview image with width set to 100%. Changing this in the code broke the automatic width calculation for me, so I am posting this as an issue/feature request.

It would be really nice if the autoHeight options would work here.

[ryanjbonnell]

I can confirm this min-height collapsing behavior, using Owl Carousel v2.0.0 beta 2.3.

[avilaj]

any news on this?

[daviddeutsch]

Apart from the min-height approach, this helps resize the stage when pressing play and on responsive changes:

// $(window).load instead of $(document).ready to fix bad behavior on webkit
$(window).load(function () {
    var mainCarousel = $("#main-carousel");

    var owl = mainCarousel.owlCarousel({
        autoHeight: true,
        video: true,
        autoplay: true,
        autoplayHoverPause: true,
        items: 1
    });

    function fitCarouselVideo() {
        mainCarousel.find('iframe').attr('height', mainCarousel.find('.owl-stage-outer').height());
    }

    owl.on('play.owl.video', function(e) {
        setTimeout(fitCarouselVideo, 800);
    });

    $(window).resize(function(){
        setTimeout(fitCarouselVideo, 800);
    });
});

[dlewand691]

I am also experiencing this same issue. Have tried applying the "padding hack" and also a height of 67.5% to the .owl-video-wrapper class. Got it to work in one instance but have not had consistent luck yet.

Am using Owl Carousel v2.0.0 beta 2.3

[iamrobert]

I applied the following - and seems to get the image 100% width, full height for video - however I need further testing:

<div class="item-video"><div class="maxh"> <a class="owl-video" href="https://www.youtube.com/watch?v=EF_kj2ojZaE"></a></div></div>

.owl-carousel .owl-video-tn {
  position: relative;
  height: 0;
 background-size: cover;
  padding-bottom: 56.25%;
  overflow: hidden; }

.maxh {max-height: 100vh;}

[AmitKB]

Thanks @iamrobert ! In my case your solution worked with padding-bottom: 80%;

[rizal72]

This is the ultimate solution.
Thanks @iamrobert

[ghost]

Is there any news on this since 4 years passed.