css - iframe 拒绝在容器 div 内响应

Question

我正在尝试制作 iframe内部响应 div ，网络上有很多关于如何执行此操作的资源，但常见的解决方案不适用于我的 YouTube 视频嵌入案例。

我正在使用骨架 CSS 样板。我有一个嵌套的 div结构如下:

<div class="container">
    <div class="row item">
        <div class="six columns">
            <iframe> </iframe>
        </div>
        <div class="six columns">
            <iframe> </iframe>
        </div>
    </div>
</div>

iframe突出到包含 div 的右边缘之外(类 .six.columns )所以我尝试了以下两个 css策略(如下)。

然而，对于这些策略中的每一个，<iframe>变得巨大，并且似乎已经占据了 .container 的宽度div (或者可能是 .row div )，而不是直接父代， .six.columns div .

div > iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

和

div.six.columns iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

我只想要 <iframe>响应地适应 .six.columns div .我怎样才能做到这一点？

Answer 1

将容器设置为 position:relative 以使 absolute 起作用。

要保持视频宽高比，将 iframe 包装到另一个 div 中，并使用 padding 技巧。假设视频是 16:9，padding-bottom 值将为 9/16=56.25%。下面是简单的演示。

https://jsfiddle.net/dfkhkLhp/

.youtube {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
}
.youtube iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div class="youtube">
    <iframe src="https://www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe>
</div>