Html 使用 HTML5 CSS3 强制 iframe YouTube 视频居中并在后台完全覆盖屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24579785/
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
Force iframe YouTube video to center fit and full cover the screen in the background using HTML5 CSS3
提问by Alan Mattano
How do you force HTML5 iframeYouTube video to center fit, cover the full-screen window background using CSS3 HTML eventually Java?
你如何强制 HTML5 iframeYouTube 视频居中，使用 CSS3 HTML 最终 Java 覆盖全屏窗口背景？
As for example "paypal.it" home page background or "unity3d.com/5" top video, has as iframe youtube video.
The iframecover full screen (zooming) and cover all the width and height when re-size the window.
It re-size maintaining the 100% min width zooming the height or the 100% min height zooming the width.
例如“ paypal.it”主页背景或“ unity3d.com/5”顶级视频，具有iframe youtube视频。所述iframe盖全屏（变焦）和覆盖所有的宽度和高度，当重新大小的窗口。它重新调整大小，保持 100% 最小宽度缩放高度或 100% 最小高度缩放宽度。
How is this effect achieve using iframeHTML5 and CSS3?
这个效果是如何使用iframeHTML5和CSS3实现的？
Code Example HTML5
代码示例 HTML5
<div class="video" style="opacity: 1;">
<iframe src="http://www.youtube.com/embed/AddHereVideoId?autoplay=1&html5=1" frameborder="0" style="height: 720px;">
</iframe>
</div>
Code CSS3 HTML eventually Java help would be appreciated.
代码 CSS3 HTML 最终 Java 帮助将不胜感激。
回答by Hinrich
For a real full screen solution, this can be achieved like this:
对于真正的全屏解决方案，可以这样实现：
HTML
HTML
<div class="video-background">
<div class="video-foreground">
<iframe src="https://www.youtube.com/embed/I4agXcHLySs?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS
CSS
* { box-sizing: border-box; }
.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
@media (min-aspect-ratio: 16/9) {
.video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
.video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}
It is not perfect, e.g. it does not work well with extreme aspect ratios of the container, but is doing a great job in most situations. Here is a working example:
它并不完美，例如它不能很好地处理容器的极端纵横比，但在大多数情况下都做得很好。这是一个工作示例：
回答by Oliver
Full-size YouTube video, all aspect ratios, CSS only
全尺寸 YouTube 视频，所有宽高比，仅 CSS
TL:DR - working fiddle
TL:DR -工作小提琴
As an update/improvement to @Hinrich's answer, I have created a CSS-only scaler that works for ALL aspect ratios - even the extremes. Rather than over-compensating the width to fit most screen sizes, the iframe is set using vwand vhand offset using the CSS transformproperty (which offsets relative to the element, not the parent).
作为对@Hinrich 答案的更新/改进，我创建了一个仅适用于所有纵横比的 CSS 缩放器 - 甚至是极端情况。而不是过补偿的宽度，以适应大多数的屏幕尺寸时，iframe使用设置vw和vh和偏移使用CSStransform属性（它抵消相对于元素，不是父）。
Most browsers (IE9+ and all evergreen browsers AFAIK) support the vwand vhunits, as well as transforms, so this should work for pretty much all browsers with no JavaScript required.
大多数浏览器（IE9+ 和所有常绿浏览器 AFAIK）都支持vw和vh单位，以及transforms，所以这应该适用于几乎所有不需要 JavaScript 的浏览器。
.video-background {
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.video-background iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
transform: translate(-50%, -50%);
}
@media (min-aspect-ratio: 16/9) {
.video-background iframe {
/* height = 100 * (9 / 16) = 56.25 */
height: 56.25vw;
}
}
@media (max-aspect-ratio: 16/9) {
.video-background iframe {
/* width = 100 / (9 / 16) = 177.777777 */
width: 177.78vh;
}
}
<div class="video-background">
<iframe src="https://www.youtube.com/embed/biWk-QLWY7U?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>
</div>
回答by Sam Willis
I think this is what you're trying to achieve:
我认为这就是您要实现的目标：
.video-wrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px;}
.video-wrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
<div class="video-wrapper">
<iframe src="http://www.youtube.com/embed/AddHereVideoId?autoplay=1&html5=1" frameborder="0" allowfullscreen></iframe>
</div>
This will give you a video that fills the container that it is in and will automatically scale the height too.
这将为您提供一个视频，该视频填充它所在的容器，并且也会自动缩放高度。
I originally found this solution here: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
我最初在这里找到了这个解决方案：https: //css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
