使用HTML5 CSS3强制iframe YouTube视频居中调整并完全覆盖背景屏幕

如何强制HTML5

iframe

YouTube视频居中，使用CSS3 HTML Java覆盖全屏窗口背景

例如“主页背景”或“顶级视频”，有如iframe youtube视频。 重新调整窗口大小时，

iframe

覆盖整个屏幕（缩放），并覆盖所有宽度和高度。 它会重新调整大小，保持100%最小宽度缩放高度或100%最小高度缩放宽度

使用

iframe

HTML5和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帮助将不胜感激。

我认为这就是您试图实现的目标：

.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&amp;html5=1" frameborder="0" allowfullscreen></iframe>
</div>

.video wrapper{位置：相对；填充底部：56.25%；/*16:9*/填充顶部：25px；}
.video wrapper iframe{位置：绝对；顶部：0；左侧：0；宽度：100%；高度：100%；}

这将为您提供一个视频，该视频将填充它所在的容器，并将自动缩放高度

---

我最初在这里找到了这个解决方案：

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

HTML

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

编辑：检查，他似乎有一个改进版的解决方案。

全尺寸YouTube视频，所有纵横比，仅CSS TL:DR-

作为对@Hinrich答案的更新/改进，我创建了一个只适用于CSS的定标器，它适用于所有纵横比，甚至极端情况。iframe使用

vw

和

vh

设置，并使用CSS

transform

属性（相对于元素而非父元素的偏移）设置偏移，而不是过度补偿宽度以适应大多数屏幕尺寸

大多数浏览器（IE9+和所有evergreen浏览器AFAIK）都支持

vw

和

vh

单元，以及

transform

s，因此这应该适用于几乎所有不需要JavaScript的浏览器

。视频背景{
位置：相对位置；
溢出：隐藏；
宽度：100vw；
高度：100vh；
}
.视频背景iframe{
位置：绝对位置；
最高：50%；
左：50%；
宽度：100vw；
高度：100vh；
转换：翻译（-50%，-50%）；
}
@介质（最小纵横比：16/9）{
.视频背景iframe{
/*高度=100*（9/16）=56.25*/
身高：56.25vw；
}
}
@介质（最大纵横比：16/9）{
.视频背景iframe{
/*宽度=100/（9/16）=177.7777*/
宽度：177.78vh；
}
}

使用CSS变量 对于那些使用CSS变量的用户，您还可以，这允许您任意重用多个类名的大小：

：根目录{
--视频宽度：100vw；
--视频高度：100vh；
}
@介质（最小纵横比：16/9）{
：根{
--视频高度：56.25vw；
}
}
@介质（最大纵横比：16/9）{
：根{
--视频宽度：177.78vh；
}
}
.视频背景{
位置：相对位置；
溢出：隐藏；
宽度：100vw；
高度：100vh；
}
.视频背景iframe{
位置：绝对位置；
最高：50%；
左：50%；
宽度：var（--视频宽度）；
高度：var（--视频高度）；
转换：翻译（-50%，-50%）；
}

这提供了全屏宽度，但它不会放大，因此对我来说它不是完全全屏。你说的“不放大”是什么意思？它不是真正的全屏，这意味着视频周围有一个边框。它可以缩放到宽度或高度，但不能同时缩放到宽度和高度。您需要更改包装的

填充底部

，以匹配所用视频的纵横比。示例代码用于16:9的视频，但如果您使用的是不同比率的视频，则需要计算。有关计算比率的建议，请参见此处：仅供参考，当放置在旋转木马或正在移动的东西中时，这不起作用-外部固定元素会带来麻烦。@JCraine在旋转木马中对我很好。只需确保您已经为旋转木马幻灯片设置了高度，并且视频区域是一个内部容器，具有此演示中指定的属性。我正在使用Glide.js插件，它工作得很好@辛里奇，你好。两年后，我遇到了一个问题。@Hinrich，当你在Windows 10 Chrome上进入F11/全屏模式时，在这个解决方案中，视频会放大20%。。降低视野和视频质量。有人知道怎么修吗？你真是个天才！为什么没有更多的选票？这很简单perfect@Oliver，在Windows 10 Chrome浏览器的F11/全屏模式下，进入此全屏模式时，视频将放大20%。你知道怎么修吗？非常感谢。@PaulMcBurney我猜你有一个4:3或16:10的小屏幕，但在全屏模式之外，浏览器地址栏使内部窗口更接近16:9。在全屏模式下，视频将缩放以适应4:3的纵横比？这种情况会发生在其他浏览器上吗？很抱歉，奥利弗回复得太晚了。。仍在解决此问题。它发生在Windows和Edge上，Firefox很好。

<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>

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