Owl Carousel video ridimensionamento non reattivo

Question

Ho ottenuto il ridimensionamento delle immagini statiche ma il video non si modifica quando viene regolata la dimensione del browser. Questo è probabilmente perché ho aggiunto una larghezza allo script. Tuttavia, se lascio semplicemente videoWidth: true,, il video diventa minuscolo.

Sul sito (http://imdarrien.com/work/Kami/kami.html)

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

Ecco la demo ufficiale dal sito web (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; 
} 

Quando videoWidth: false

Answer 1

Con l'aggiunta di "reattivo: vera "opzione e cambio vide o larghezza tag 100%; altezza: auto è possibile ottenere il video come reattivo.

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

Answer 2

Sono completamente d'accordo che l'aggiunta di "responsive: true" l'opzione e modificando la larghezza tag video al 100% ; altezza: auto sei in grado di ottenere il video come reattivo.