css - Youtube 视频作为具有最小宽度和最小高度的完整背景

Question

我想要一个全尺寸的背景 YouTube 视频。我用了following example对于 html5 视频，它有效。

我想要相同的、可调整大小的背景视频，但不幸的是两边都出现黑条。

针对 html5 视频的解决方案是以下代码段:

min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: aboslute;

youtube 视频有什么问题？获得相同结果的最佳方法是什么？

body {
  margin: 0;
  padding: 0;
  background: #333;
  background-attachment: fixed;
  background-size: cover;
}

#video-background {
  position: fixed;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: -100;
}

article {

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 10px solid rgba(255, 255, 255, 0.5);
  margin: 10px;
}

h1 {
  position: absolute;
  top: 60%;
  width: 100%;
  font-size: 36px;
  letter-spacing: 3px;
  color: #fff;
  font-family: Oswald, sans-serif;
  text-align: center;
}

<article>

  <h1>GROSS DESIGN co.</h1>
</article>

<video autoplay loop id="video-background" muted>
  <source src="http://beta.mattgrossdesign.com/sites/default/files/wood%20autumn-HD.mp4" type="video/mp4">
</video>
  

Answer 1

您可以使用 Jquery 尝试另一种方法；它可以让你的 youtube 视频根据浏览器视口(viewport)自动调整大小。将您的内容放入 DIV 并将其用作容器。

Original Tutorial