I got the static images to resize but the video doesn't when the browser size is adjusted. This is probably because I've added a width into the script. However, if I just leave videoWidth: true,
then the video becomes tiny.
On the website (http://imdarrien.com/work/Kami/kami.html)
https://jsfiddle.net/9NJ2k/6/
Here is the offical demo from the website (http://www.owlcarousel.owlgraphic.com/demos/video.html)
video:true,
videoHeight: 500,
videoWidth: 856,
.owl-carousel .owl-video-wrapper {
position: relative;
height: 100%;
background: #000;
}
.owl-carousel .owl-video-play-icon {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
background: url(play_button.png) no-repeat;
cursor: pointer;
z-index: 1;
-webkit-backface-visibility: hidden;
opacity:1;
transition: all 1s;
}
When videoWidth: false
You have to give the width and height attributes to the img markup. Also, it will need to be display: block in order to ignores owl-carousel's 100% width. You could also include a wrapper around it, will work better. Henrique M.
Setting of the responsive is very simple. Structure of responsive option: responsive : { // breakpoint from 0 up 0 : { option1 : value, option2 : value, ... }, // breakpoint from 480 up 480 : { option1 : value, option2 : value, ... }, // breakpoint from 768 up 768 : { option1 : value, option2 : value, ... } }
To add video into carousel just put <a class="owl-video" href="_straight URL from YouTube, Vimeo, or vzaar"></a> . A tag is not mandatory, it can be any other tag but "owl-video" and href with url link is required.
To use Owl Carousel, you'll need to make sure both the Owl and jQuery 1.7 or higher scripts are included.
By adding "responsive:true" option and changing video tag width 100%;height:auto you can get video as responsive.
Demo: http://jsfiddle.net/nLz17fcv/5/
script:
$(document).ready(function() {
$("#carousel").owlCarousel({
items:1,
autoPlay : 5500,
stopOnHover : true,
center:true,
navigation:false,
pagination:false,
goToFirstSpeed : 1300,
singleItem : true,
autoHeight : true,
responsive: true,
responsiveRefreshRate : 200,
responsiveBaseWidth: window,
video:true,
transitionStyle:"fade",
onTranslate: function() {
$('.owl-item').find('video').each(function() {
this.pause();
});
}
});
})
CSS
.owl-carousel {width:90%; margin: 0 auto;}
.owl-carousel img{width:100%;height:auto;}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With