iframe 拒绝在容器 div 内响应答案

【问题标题】：iframe refusing to be responsive inside container diviframe 拒绝在容器 div 内响应
【发布时间】：2015-12-24 04:21:53
【问题描述】：

我正在尝试使 iframe 在 div 中响应，网上有很多关于如何做到这一点的资源，但常见的解决方案不适用于我的 YouTube 视频嵌入。

我正在使用 Skeleton CSS Boilerplate。我有一个嵌套的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.columnsdiv。

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。我怎样才能做到这一点？

【问题讨论】：

你添加div.six.columns{position:relative;}了吗？
@Pangloss 太棒了，成功了！但是现在视频的高度被挤压了。请问如何调整容器div的高度？

标签： css iframe responsive-design skeleton-css-boilerplate

【解决方案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>

【讨论】：