Question

我想要一个完整尺寸的背景YouTube视频。我使用了following example来获取html5视频，但它确实有效。

我想要同样的，可调整大小的背景视频，但遗憾的是黑方栏出现在两边。

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

Original Tutorial

Youtube视频作为完整背景，最小宽度和最小高度

1 个答案: