Owl Carousel videosu duyarlı bir şekilde yeniden boyutlandırmıyor

Question

Yeniden boyutlandırmak için statik görüntüler aldım ancak tarayıcı boyutu ayarlandığında video görüntülenmiyor. Bu büyük olasılıkla senaryoya bir genişlik ekledim. Ancak, videoWidth: true,'dan ayrılırsam video küçülür. web İşte (http://imdarrien.com/work/Kami/kami.html)

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

günü

"duyarlı ekleyerek 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; 
} 

videoWidth: false

Answer 1

gelen resmi demo: gerçek "seçenek ve değişen vide o etiket genişliği% 100, yükseklik: otomatik olarak videoyu duyarlı olarak alabilirsiniz.

Demo: http://jsfiddle.net/nLz17fcv/5/

senaryo:

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

tamamen katılıyorum "tepkili: true" eklenmesi seçeneği ve% 100'e video etiketi genişliğini değiştirmeden yükseklik: otomatik olarak videoyu duyarlı olarak alabilirsiniz.