Youtube 视频库无法正常工作 - html css答案

【问题标题】：Youtube Video Gallery not working properly - html cssYoutube 视频库无法正常工作 - html css
【发布时间】：2021-11-05 16:44:46
【问题描述】：

我正在制作一个投资组合网站，当用户点击视频标签时，它应该有两个嵌入的、响应式的、以画廊形式存在的 youtube 视频。我已经尝试过实现这一点，但由于某些奇怪的原因，第二个视频非常小。

第二个的尺寸我没有做任何不同，所以我很困惑如何解决这个问题。（第二个视频应该和第一个一样大）

这是我的代码：

.embed-container-1{
     position: relative;
     width: 100%;
     padding-bottom: 56.25%; /* 16:9 ratio */
     height: 0;
}

.embed-container-2{
     position: relative;
     width: 100%;
     padding-bottom: 56.25%; /* 16:9 ratio */
     height: 0;
}

.embed-container-1 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.embed-container-2 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

        <div class="col-lg-4 col-md-6 portfolio-item filter-web">
          <div class='embed-container-1'><iframe src='https://www.youtube.com/embed/jNQXAC9IVRw' frameborder='0' allowfullscreen></iframe></div>

        <div class="col-lg-4 col-md-6 portfolio-item filter-web">
          <div class='embed-container-2'><iframe src='https://www.youtube.com/embed/jNQXAC9IVRw' frameborder='0' allowfullscreen></iframe></div>

感谢任何帮助，谢谢！

P.S：portfolio-item filter-web 是视频进入视频部分的方式

【问题讨论】：

标签： html css responsive gallery

【解决方案1】：

分享更多代码将有助于了解问题出在哪里。他们都在同一列吗？如果是这样，要么将它们放在单独的列中，要么使用 flexbox 按比例显示它们，或者将每个容器的宽度设置为 50%。

【讨论】：

【解决方案2】：

糟糕，我只是忘了关闭“portfolio-item filter-web”的 div 标签。很抱歉。

【讨论】：