Html 如何使 YouTube 嵌入视频成为整页宽度的视频？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20182409/
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
How to make a YouTube embedded video a full page width one?
提问by Ranveer
Here's the fiddle to the code: http://jsfiddle.net/dLPa8/
这是代码的小提琴：http: //jsfiddle.net/dLPa8/
If you scroll down, there's a video embedded from YouTube. What I need it, it should cover the full page height and width. I mean it should appear somewhat like the first section (in the fiddle).
如果您向下滚动，就会看到一个从 YouTube 嵌入的视频。我需要它，它应该覆盖整个页面的高度和宽度。我的意思是它应该看起来有点像第一部分（在小提琴中）。
I tried this:
我试过这个：
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
It solved the problem to a certain extent, but the video clings to the top of the page using the above iframe. How can I make the video section height the full page height?
它在一定程度上解决了问题，但使用上述iframe. 如何使视频部分高度成为整页高度？
回答by mdesdev
Here's a FIDDLE
这是一把小提琴
<iframe id="video" src="//www.youtube.com/embed/5iiPC-VGFLU" frameborder="0" allowfullscreen></iframe>
$(function(){
$('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
// If you want to keep full screen on window resize
$(window).resize(function(){
$('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
});
});
回答by StackSlave
Try using innerHeightor .clientHeight:
尝试使用innerHeight或.clientHeight：
var doc = document, bod = doc.body, dE = doc.documentElement;
var wh = innerHeight || dE.clientHeight || bod.clientHeight;
var whnow contains window height, without scrollbar.
var wh现在包含窗口高度，没有滚动条。
回答by s k
Correct style for your iframe
正确的 iframe 样式
iframe {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
