Owlcarousel2: Not getting video image previews

[madscollin]

I have been trying to wrap my head around this.

I am not getting image previews from YouTube or Vimeo

Example: http://jsfiddle.net/9NJ2k/

Look at slide 2, 4 and 5. I only get the play icon. What am I missing?

[xcartmods]

Set a height and width...
videoWidth: 356,
videoHeight: 200,

[madscollin]

Yeah. But the problem with that. Is that it kills the responsive functionallity. It should be possible to do it with out that. Like in the demo here? http://www.owlcarousel.owlgraphic.com/demos/video.html

[xcartmods]

I think it's because autoheight is not fully implemented yet.
If you use only images of varying height, autoheight is not working, for me at least.
It'll work fine if you only use videos and set the videoWidth and videoHeight.
http://pjcom.co.uk/owl/TESTS.html

[madscollin]

Thanks for trying to help me out xcartmods :-)

Your link seems to be broken?

Even if I do it with videos only, it is the same deal. Example: http://jsfiddle.net/9NJ2k/1/

Setting a width height should not be nessesary. In the demo here: http://www.owlcarousel.owlgraphic.com/demos/video.html there has not been set any. And it is totally responsive if you try to shrink the browser. That is what I need :-)

[xcartmods]

Yes, strange innit, having the same issue. My link should be working...

[KalouPodcast]

I have the same issue.

Before developers find a solution of this problem, you can add this :
.owl-carousel .item-video { height: 300px; }
but it's important to let "lazyLoad" to "false".
It done the job :)

You can add or not merge to true if you want it looks like the demo http://www.owlcarousel.owlgraphic.com/demos/video.html

And if you need responsivity you can change the height with mediaquieries

[witrin]

@madscollin The demo has a fixed height! Like @KalouPodcast already said .owl-carousel .item-video is set to 300px. It's all working even with lazy load: http://jsfiddle.net/9NJ2k/2/. I don't get the problem here ... Only autoHeight won't work with video for several reasons. One of them might be because the thumbnail is added as CSS background. The other might be the player itself ...

[witrin]

No response.

[katmaha]

I know this is closed but wasn't sure if to open a new issue. Problem is the documentation doesn't mention anything about having to set a height for videos. Spent ages thinking I'd done something wrong, eventually stumbled across this. Otherwise, love it!

[tsarma]

Set it to your liking in callback

// Assuming you have atleast one more image slide
var myCallback = function(objOwl){
        var maxH = 0;
        objOwl.dom.$oItems.each(function(){
                if(parseInt($(this).find("img").css("height"), 10) > maxH) {
                       maxH = $(this).find("img").css("height");
                }
        });
         $(objOwl.dom.$oItems).find(".owl-video-tn").css("height", maxH);
         // Or set the height directly, say to 300px
         // $(objOwl.dom.$oItems).find(".owl-video-tn").css("height", 300);
};


//Inside owl options
onInitialized: function(){ myCallback(this);},
onResize: function(){ myCallback(this);},

[stratboy]

Thank you BS, that can be a temp solution. Still, I would keep the issue open, since it's definitely a feature to implement in core code, don't you think?

[stratboy]

I've found several bugs on BS's code, at least relative to the latest Owl version. I refactored the whole function, here's the working code:

function reset_video_size(video_width){
  //better use jquery selectors: owl.items() and $(owl.items()) give problems, don't know why
  var items = $('.owl-item:not([data-video])');
  var videos = $('.owl-video-wrapper');
  var v_height = 0;

  //user-defined width ELSE, width from inline css (when owl.autoWidth == false), 
  //ELSE, computed innerwidth of the first element.
  var v_width = (video_width) ? video_width : ((items.css('width') != 'auto') ? items.css('width') : items.innerWidth());

  items.each(function(){
    var h = $(this).innerHeight();
    if(h > v_height) v_height = h;
  });

  set both width and height
  videos.css({ 'height':v_height, 'width':v_width });
};

you should call this function like this:

var carousel = $('.owl-carousel');

carousel.owlCarousel({
  video:true
  ,onInitialized: function(){ reset_video_size(); }
  ,onResized: function(){ reset_video_size(); }

//etc etc...

or on direct events:

carousel.on('initialized.owl.carousel', function(){ reset_video_size(); });

I still think that all this computations should be done automatically by the code code.