CODEWITHSUNDEEP
jquerycssvideocarouselowl-carousel
Deborah Taylor
Deborah Taylor

Reputation: 61

Owl Carousel not displaying videos

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

Upvotes: 5

Views: 23828

Answers (7)

a_vedenin
a_vedenin

Reputation: 91

IF you want open page without server and have these errors:

net::ERR_FILE_NOT_FOUND

enter image description here

Open file:

owl.carousel\dist\owl.carousel.js

or

owl.carousel\dist\owl.carousel.min.js (if you use minify version on site)

And add protocol, example:

enter image description here

Upvotes: 0

lucidlips
lucidlips

Reputation: 46

You can use fluid width video containers to push the height rather than fixing the height with css. By doing this you can avoid any black banding and your videos will play flush with the container and will maintain perfect ratio on resize.

<div class="owl-carousel owl-theme">
    <div class="video-wrapper">
        <div class="item-video">
            <div class="owl-video" href="//videourl">

You will need to modify the css of the item-video so it will play nice.

.owl-carousel .item-video {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}

Additionally you can also make the cover image fill the slide and lose that banding as well.

.owl-carousel .owl-video-tn {
background-size: cover !important;
}

The video wrapper I used was 16x9 but any fluid width wrapper will work. Here's the one I used.

.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

source: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Upvotes: 1

Stewart French
Stewart French

Reputation: 31

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;
}

Upvotes: 3

gabriel
gabriel

Reputation: 93

As visitsb said, you can set thumbnails height from CSS. You'll get a nice carousel with a black background.

However, options mentionned in the documentation only work when both are set (from source code)

$('.owl-carousel').owlCarousel({
  video: true,
  videoHeight: 300, 
  videoWidth: 600
});

The result with the first solution is prettier.

Upvotes: 1

visitsb
visitsb

Reputation: 601

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

Upvotes: 16

Matt
Matt

Reputation: 1

I had to manually add a height to .owl-video-wrapper and it seems to be OK now.

Hope this helps someone in future. It is a bit weird though.

Upvotes: -1

user3196599
user3196599

Reputation:

Just from quickly inspecting the console, looks like owl js is not loaded.

<script src="../assets/owlcarousel/owl.carousel.js"></script>

Upvotes: 0

Related Questions