<分区>
我使用来自 YouTube 的 iframe 在我的网站上放置了一个视频，而 iframe 是全宽的 (100%)视频在帧内非常小(高度)。如何使其适合容器的宽度？
代码:
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/5m_ZUQTW13I" frameborder="0" allowfullscreen></iframe>
看截图
<分区>
我使用来自 YouTube 的 iframe 在我的网站上放置了一个视频，而 iframe 是全宽的 (100%)视频在帧内非常小(高度)。如何使其适合容器的宽度？
代码:
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/5m_ZUQTW13I" frameborder="0" allowfullscreen></iframe>
看截图
最佳答案
要使 YouTube 视频全宽并保持高度(并保持响应)，您可以使用以下设置。
.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%;
}<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="https://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>关于html - 显示带有 iframe 全宽页面的 YouTube 视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38270661/