Owl Carousel嵌入YouTube视频后无法响应式适配问题求助

问题核心原因 #

• 配置项autoWidth: true会强制轮播项优先使用元素自身宽度，覆盖响应式规则中预设的items宽度计算逻辑，而你的iframe默认写死了560px的固定宽度，无法跟随容器缩放
• iframe本身没有做响应式适配，固定宽高属性会限制尺寸变化

修改步骤 #

1. 调整Owl Carousel JS配置 #

删除autoWidth: true配置项，保留响应式断点规则即可：

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    navigation : true,
    loop: true,
    responsiveClass: true,
    center: true,
    merge: true,
    responsive:{
        0:{
            items: 1
            },
        600:{
            items: 2
            },
        900:{
            items: 3
            }
        }
  });
});

2. 改造HTML结构，删除iframe固定宽高属性 #

把所有iframe标签上的width="560"和height="315"属性删除，其余属性保留即可，示例：

<div class = "item"><iframe src="https://www.youtube.com/embed/WZwr2a_lFWY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

3. 新增响应式视频适配CSS #

用16:9比例容器方案适配iframe，更新后的CSS如下：

#owl-demo .item{
  margin: 10px;
  border-radius: 3px;
  position: relative;
  padding-top: 56.25%; /* 16:9视频的高度占比 */
  overflow: hidden;
}
#owl-demo .item iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

调整后即可实现随浏览器宽度自动适配的视频轮播效果。

内容的提问来源于stack exchange，提问作者bliss