使用HTML5 CSS3强制iframe YouTube视频居中显示并在后台完全覆盖屏幕

Question

您如何强制HTML5 iframeYouTube视频居中对齐，并最终使用CSS3 HTML覆盖全屏窗口背景？

例如“ paypal.it ”首页背景或“
unity3d.com/5 ”顶部视频，作为iframe
youtube视频。所述iframe盖全屏（变焦）和覆盖所有的宽度和高度，当重新大小的窗口。它调整大小以保持100％最小宽度缩放高度或100％最小高度缩放宽度。

使用iframeHTML5和CSS3 如何实现这种效果？

代码示例HTML5

<div class="video" style="opacity: 1;">

    <iframe src="http://www.youtube.com/embed/AddHereVideoId?autoplay=1&amp;html5=1" frameborder="0" style="height: 720px;">
     </iframe>

</div>

代码CSS3 HTML最终将对Java帮助有所帮助。

Answer 1

对于真正的全屏解决方案，可以这样实现：

的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

* { 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; }
}

它不是完美的，例如，不能在极端的容器长宽比下很好地工作，但是在大多数情况下都做得很好。