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

Question

我正在制作一个作品集网站，当用户点击视频选项卡时，它应该有两个嵌入的、响应式的、画廊形式的 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 是视频进入视频部分的方式

Answer 1

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

Answer 2

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

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

Youtube Video Gallery not working properly - html css

html

css

gallery

responsive