Question

问题：我需要一个响应式布局（最好是100％页面宽度），左侧是嵌入式YouTube视频，右侧是缩略图网格。

我天真地认为iframe的行为与图像非常相似，并且当宽度发生变化时，它们会自动调整iframe高度。

以下是我想法（和想要的）iframe对我的问题布局的行为： https://jsfiddle.net/5by8x44b/

以下是我在使用Iframe时得到的结果：

代码的最基本形式（在jsfiddle中更具体）如下所示：

（HTML）

<div style="border: 1px solid pink; overflow: hidden; padding:5%;">

    <div class="left_box" style="background-color:cyan;">
        <iframe src="https://www.youtube.com/embed/2ZR8Oc9hEnM" frameborder="0" allowfullscreen></iframe>
    </div>

    <div class="right_box">
       <!-- Image Grid Below -->
        <!-- 1st row */ -->
        <div class="grd_sqr"></div>
        <div class="grd_sqr"></div>
        <div class="grd_sqr"></div>
        <!-- 2nd row */ -->
        <div class="grd_sqr"></div>
        <div class="grd_sqr"></div>
        <div class="grd_sqr"></div>
        <!-- 3rd row */ -->
        <div class="grd_sqr"></div>
        <div class="grd_sqr"></div>
        <div class="grd_sqr"></div>
    </div>
</div>

（CSS）

.left_box {
    float: left;
    width: 65%;

}
.right_box {
    float:right;
    width: 35%;
}

iframe {
    width: 100%;
}

img {
    width:100%;
}

.grd_sqr {
    float:left;
    width: 30%;
    padding-bottom: 33%;
    margin:1.33%;
    background-color: #1E1E1E;
}

如果您不清楚区别是什么，请为两个JSFiddle示例调整结果窗口的大小，问题应该清楚。

=============================================== ==========

潜在解决方案：我找到了详细介绍此问题核心的文章（响应式iframe），最值得注意的是：

https://avexdesigns.com/responsive-youtube-embed/

https://benmarshall.me/responsive-iframes/

但是，我使用一个简单的浮动左/右布局来创建两个主要列，我怀疑为什么上面链接中详述的解决方案不能解决我的问题问题

我已经好几天了。有谁可以帮我解决这个问题？

如何制作响应式YouTube嵌入网格/列（响应式iframe）

0 个答案: