使用iframe全屏显示YouTube视频

我已经在YouTube上使用iframe在我的网站上放置了一个视频，而iframe是全宽（100%）视频在帧内非常小（高度）。我如何使它适合容器的宽度？使用iframe全屏显示YouTube视频

代码：

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

见截图

来源

2016-07-08 user3005003

的可能的复制[收缩的YouTube视频响应宽度（ http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width） –

你试图制作背景或只是整页视频？ –

请显示您使用的代码，以便我们为您提供可能的解决方案 –

为了使你管的视频全宽和维护高度（并保持它响应），你可以使用下面的设置。

与视频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%; 
}

来源

2016-07-08 15:47:02

的问题是，一个iframe和视频无法规模化等的图像，它得到基于宽高比的比例正确的高度如果你只是将高度保持在默认值。

解决这个问题的方法是找出视频的原始宽度/高度，并做一些数学计算，确定高度应该在100％的屏幕宽度。假设它是1920x1080，你可以使用视口宽度（vw）做这样的事情。如果你不希望它完全填满屏幕，你可以将100vw减少到更好的值。

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

来源

2016-07-08 15:47:44 will

谢谢！使用'height：calc（100vw/1.77777778）;'去除多余的黑线。 –

-1

使用全屏属性：

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

如果没有，那么工作还包括下面的CSS代码：

#myFrame{ 
position:relative; 
top:0; 
left:0; 
width:100%; 
height:100%;

来源

2016-07-08 15:47:48 Saini

使用iframe全屏显示YouTube视频

回答

相关问题