Video băng chuyền con cú không thay đổi kích thước một cách có trách nhiệm

Question

Tôi nhận được hình ảnh tĩnh để thay đổi kích thước nhưng video không khi kích thước trình duyệt được điều chỉnh. Điều này có lẽ vì tôi đã thêm chiều rộng vào tập lệnh. Tuy nhiên, nếu tôi chỉ để lại videoWidth: true, thì video sẽ trở nên rất nhỏ.

Trên trang web (http://imdarrien.com/work/Kami/kami.html)

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

Dưới đây là bản demo chính thức từ trang 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; 
} 

Khi videoWidth: false

Answer 1

Bằng cách thêm "đáp ứng: đúng "tùy chọn và thay đổi vide o chiều rộng thẻ 100%, chiều cao: tự động bạn có thể nhận được video như đáp ứng.

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

kịch bản:

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

Tôi hoàn toàn đồng ý rằng việc bổ sung các "phản ứng nhanh: true" tùy chọn và thay đổi độ rộng thẻ video đến 100% , chiều cao: tự động bạn có thể nhận được video như đáp ứng.