HTML+CSS实现YouTube响应式视频画廊时第二个视频尺寸过小求助

你提供的HTML代码中，第一个col-lg-4容器没有闭合标签，导致第二个视频容器被嵌套在了第一个col-lg-4内部，继承了父容器的宽度约束，所以尺寸偏小。

1. 补全第一个视频外层col-lg-4的闭合标签
2. 可合并重复的CSS类减少冗余代码，两个响应式视频容器的样式完全一致，无需定义两个独立类

CSS代码 #

/* 合并为公共类，所有响应式嵌入视频都可以复用 */
.embed-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9比例 */
  height: 0;
}
.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

HTML代码 #

<div class="col-lg-4 col-md-6 portfolio-item filter-web">
  <div class='embed-container'><iframe src='https://www.youtube.com/embed/jNQXAC9IVRw' frameborder='0' allowfullscreen></iframe></div>
</div> <!-- 补全此处的闭合标签即可解决核心问题 -->
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
  <div class='embed-container'><iframe src='https://www.youtube.com/embed/jNQXAC9IVRw' frameborder='0' allowfullscreen></iframe></div>
</div>

如果你不想调整现有CSS类定义，仅补全第一个col-lg-4的闭合标签即可解决两个视频尺寸不一致的问题。

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