Sowa Karuzela wideo nie reaguje na zmianę rozmiaru - javascript, jquery, html, video

Dostałem statyczne obrazy do zmiany rozmiaru, ale film nie jest dopasowywany do rozmiaru przeglądarki, prawdopodobnie dlatego, że dodałem szerokość do skryptu. Jednak jeśli po prostu odejdę videoWidth: true, wtedy film staje się malutki.

Na stronie internetowej (http://imdarrien.com/work/Kami/kami.html)

https://jsfiddle.net/9NJ2k/6/

Oto oficjalne demo ze strony internetowej (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;
}

Gdy videoWidth: false

Odpowiedzi:

Dodając opcję "responsive: true" i zmieniając szerokość tagu wideo 100%, height: auto, możesz uzyskać wideo jako responsywne.

Próbny: http://jsfiddle.net/nLz17fcv/5/

scenariusz:

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

Całkowicie zgadzam się z tym, że dodanie opcji "responsive: true" i zmiana szerokości tagu wideo na 100%, height: auto jest w stanie ustawić wideo jako responsywne.