Owl Carousel video not responsively resizing
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;}
I completely agree that the addition of "responsive:true"
option and changing the video tag
width:100%;height:auto
you are able to get video as responsive.