Owl Carousel does not show video
I have an example here: VideoSlide Example
My problem is that nothing is showing.
I actually copied the code from the Owl site, but I can't see anything.
I originally coded it on a larger site, this is a shrunken version only with the one applicable to the carousel. I have a carousel working with images, but the videos elude me, if anything, the videos look like they should be simpler!
I took the latest Owl JS and CSS for version 2.
I didn't change the JS or CSS, it loaded the state in it.
I made a comparison of the code to the Owl page for video and Calvin College, which also uses an owl carousel with video.
As far as I can see, I did the same.
Obviously I didn't.
Debbie
source to share
owl website video demo actually has a style for.item-video
.owl-carousel .item-video{height:300px}
Add this to your own CSS and your videos will appear if you use the same markup as the video demo.
The options mentioned in the documentation have no effect , so I think it might be a better idea to get owl 2.0 out of beta ( 2.0.0-beta.2.4 at the time of this post).
videoWidth: false, // Default false; Type: Boolean/Number
videoHeight: false, // Default false; Type: Boolean/Number
source to share
Like visitingb , you can set the height of the thumbnails from CSS. You will get a nice carousel with a black background.
However, the options mentioned in the documentation only work when both are set (from source )
$('.owl-carousel').owlCarousel({
video: true,
videoHeight: 300,
videoWidth: 600
});
The result with the first solution is prettier.
source to share
A convenient addition to visitb is the fact that most videos have a fixed aspect ratio (16: 9). This way you can use regular CSS scrolling to simplify formats to wrap each video element in a fixed aspect ratio container.
Specifically, wrap your video streams like this:
<div class="fixed-video-aspect"><div class="item-video"> ... </div></div>
Then add the following CSS to fix each element at 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;
}
source to share
You can use fluid containers to push the height rather than fix the height with css. By doing this, you can avoid any black bars and your videos will play flush with the container and maintain the perfect ratio when resized.
<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 file to make it look good.
.owl-carousel .item-video {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
Alternatively, you can also make the cover image fill the slide and lose that strip.
.owl-carousel .owl-video-tn {
background-size: cover !important;
}
The graphics card used was 16x9, but any liquid width wrap will work. Here is 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
source to share