css - 带有 iframe 的响应式 youtube 视频

Question

我在 html 中有一个以下 iframe，其中包含 youtube 视频。这是 iframe:

<iframe width="420" height="315" src="https://www.youtube.com/embed/DgPO56ImqUA?showinfo=1" frameborder="0" allowfullscreen></iframe>

我怎样才能使这个 iframe 响应？

Answer 1

您可以使用固有比率。包含元素是响应式的，并保持特定的纵横比。里面的iframe绝对定位到这个元素。

HTML

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="420" height="315" src="https://www.youtube.com/embed/DgPO56ImqUA?showinfo=1" frameborder="0" allowfullscreen></iframe>
</div>

CSS

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

有关 CSS Tricks 的更多信息