Question

我使用YouTube上的iframe在我的网站上放置了一个视频，而iframe是全宽（100%）视频非常小（高度）框架。如何使其适合容器的宽度？

代码：

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/5m_ZUQTW13I" frameborder="0" allowfullscreen></iframe>

见截图

Answer 1

要制作You Tube Video全宽并保持高度（并保持响应），您可以使用以下设置。

带视频的HTML

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=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%;
}

Answer 2

问题在于，iframe和视频无法像图片一样缩放，只要您将高度保留为默认值，它就会根据宽高比获得比例正确的高度。

解决方案是找出视频的原生宽度/高度，然后做一些数学计算，确定100％屏幕宽度的高度。假设它是1920x1080，你可以使用视口宽度（vw）做这样的事情。如果你不想让它真正填满屏幕，你可以将100vw降低到更合适的程度。

iframe{
 width: 100vw
 height: calc(100vw/1.77);
}

Answer 3

使用全屏属性：

x.validation

如果不起作用，则还包括以下css代码：

<html>
 <body>
  <iframe id="myFrame" src="http://www.youtube.com/embed/W7qWa52k-nE" frameborder="0" allowfullscreen></iframe>
 </body>
</html>

使用iframe整页宽度显示YouTube视频

3 个答案: