Html 显示带有 iframe 页面全宽的 YouTube 视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38270661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Displaying a YouTube video with iframe full width of page
提问by user2953989
I've put a video in my site using an iframefrom YouTube, while the iframeis full width (100%) the video is very small (height) within the frame. How do I make it fit the width of the container?
我已经使用iframe来自 YouTube的视频在我的网站中放置了一个视频，而iframe全宽 ( 100%) 视频在框架内非常小（高度）。如何使它适合容器的宽度？
Code:
代码：
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/5m_ZUQTW13I" frameborder="0" allowfullscreen></iframe>
See screenshot
看截图
回答by Web Develop Wolf
To make a You Tube Video full width and preserve the height (and keep it responsive) you can use the following setup.
要使 You Tube 视频全宽并保留高度（并保持响应），您可以使用以下设置。
HTML with 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
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%;
}
回答by will
The issue is that an iframe and video can't scale like an image, where it gets the proportionally correct height based on the aspect ratio if you just leave the height at the default.
问题是 iframe 和视频不能像图像一样缩放，如果您只是将高度保留为默认值，它会根据纵横比获得按比例正确的高度。
A solution for this is to figure out the native width/height of your video, and do a little math to figure out what the height should be at 100% screen width. Assuming it's 1920x1080, you can do something like this using viewport width (vw). You can reduce the 100vw to whatever fits better, if you don't want it to literally fill the screen.
对此的解决方案是找出视频的原始宽度/高度，并进行一些数学运算以找出 100% 屏幕宽度时的高度。假设它是 1920x1080，您可以使用视口宽度 (vw) 执行类似操作。如果您不希望它真正填满屏幕，您可以将 100vw 降低到更合适的值。
iframe{
width: 100vw
height: calc(100vw/1.77);
}
回答by Saini
Use the fullscreen attribute:
使用全屏属性：
<html>
<body>
<iframe id="myFrame" src="http://www.youtube.com/embed/W7qWa52k-nE" frameborder="0" allowfullscreen></iframe>
</body>
</html>
If it not worked then also include the following css code:
如果它不起作用，则还包括以下 css 代码：
#myFrame{
position:relative;
top:0;
left:0;
width:100%;
height:100%;
