Owl Carousel not displaying videos

Question

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 1

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

Answer 2

A convenient addition to visitsb's answer is the fact that most videos have a set aspect ratio (16:9). So you can use the normal aspect ratio CSS padding trick to wrap each item-video in a fixed aspect ratio container.

Specifically, wrap the video items like this:

<div class="fixed-video-aspect"><div class="item-video"> ... </div></div>

Then add the following CSS to fix each item in 16:9:

.owl-carousel .fixed-video-aspect {
  position: relative;
}
.owl-carousel .fixed-video-aspect:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
}
.owl-carousel .fixed-video-aspect > .item-video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}