Owl Carousel not displaying videos

jquery css video carousel owl-carousel
Deborah Taylor picture Deborah Taylor · Oct 4, 2014 · Viewed 20.4k times · Source

I have an example here: VideoSlide Example

My problem is that nothing displays.

I've effectively copied the code from the Owl site, but I'm getting nothing displayed.

Originally, I'd encoded it in a bigger site, this is the cut down version with only that applicable to the carousel. I've got the carousel working with images, but the videos elude me, if anything, videos look like they should be simpler!

I have taken the latest Owl JS and CSS for version 2.

I have not amended the JS or CSS, it's in it's downloaded state.

I've done a code comparison with Owl page for videos and Calvin College, which also uses the Owl carousel with videos.

As far as I can see, I've done the same.

Obviously I've not.

Debbie

Answer

visitsb picture visitsb · Mar 20, 2015

owl's website on video demo actually has a style for .item-video 

.owl-carousel .item-video{height:300px}

Add that to your own css, and your videos will show up if you use the same markup as the video demo.

The options mentioned on the documentation do not have any effect, so I guess it might be a better idea for owl 2.0 to come out of beta (2.0.0-beta.2.4 at time of this post).

videoWidth: false, // Default false; Type: Boolean/Number
videoHeight: false, // Default false; Type: Boolean/Number

Related questions

My website loads slow because of too many embedded videos

My website loads slow because of too many embedded videos. I'm seen where there is an image (overtop of where the video is embedded) and you click it, at which point, the embedded video is loaded. Could anyone give me …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
How can I remove a style added with .css() function?

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value: if(color != '000000') $("body").css("background-color", color); else // remove style ? How can I do this? Note that the line above …

Read More