我得到了静态图片以调整大小,但视频在调整浏览器大小时没有。这可能是因为我在脚本中添加了一个宽度。但是,如果我离开videoWidth: true,
,那么视频会变得很小。
在网站上(http://imdarrien.com/work/Kami/kami.html)
以下是网站(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;
}
答案 0 :(得分:9)
通过添加" 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;}
答案 1 :(得分:1)
我完全同意添加"响应:true"选项并将视频标记宽度更改为100%;高度:自动您可以将视频视为响应。