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

【问题标题】：Youtube video as full background with min-width and min-heightYoutube 视频作为具有最小宽度和最小高度的完整背景
【发布时间】：2016-02-16 14:00:36
【问题描述】：

我想要一个全尺寸的背景 youtube 视频。我将following example 用于html5 视频，效果很好。

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

html5视频的解决方案如下sn-p：

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>

【问题讨论】：

标签： css html youtube html5-video

【解决方案1】：

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

Original Tutorial

【讨论】：