Owl Carousel视频不具有响应式调整大小功能

Question

我已经成功地将静态图像调整大小，但是当浏览器大小调整时，视频却没有跟着调整。这可能是因为我在脚本中添加了一个宽度。然而，如果我只留下videoWidth: true，那么视频就会变得很小。

网站地址：http://imdarrien.com/work/Kami/kami.html

以下是官方演示的链接 (http://www.owlcarousel.owlgraphic.com/demos/video.html)。

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

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时

- user2252219

---

如果使用 videoWidth: false 会发生什么？ - Michael Doye

@M.Doye 视频根本没有显示。 - user2252219

Answer 1

通过添加“responsive：true”选项并将视频标签的宽度更改为100％;高度：自动，您可以使视频具有响应性。

演示：http://jsfiddle.net/nLz17fcv/5/ 脚本：

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

- ItzMe_Ezhil

---

在您的演示代码中视频无法加载，我添加了一个视频标签来获取视频。 - ItzMe_Ezhil

Answer 2

我完全同意添加 "responsive:true" 选项并更改视频标签的做法。

width:100%;height:auto 

你可以将视频设置为响应式。

- Michelle Goodbrand