iframe 拒绝在容器内响应 div

Question

我正在尝试让 iframe 在 div 内响应视频嵌入。

我正在使用骨架 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 (class .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>

iframe 拒绝在容器内响应 div

iframe refusing to be responsive inside container div

css

iframe

responsive-design

skeleton-css-boilerplate