css - 全屏 HTML5 视频背景关闭页面

Question

目前正在开发一个网站，我想在其中添加像 Airbnb 那样的全屏视频背景。

我的问题是视频总是离开页面。当我将宽度设置为 cover 时会发生这种情况。我对此的解决方案当然是将其设置为 100% 但这会破坏响应式设计的高度。将其设置为 auto 也不起作用。

将视频包裹在另一个 div 中不起作用。

我尝试为@media 请求设置不同的样式，但问题仍然存在于视频超出页面的地方。

我环顾四周，发现了 this.接缝是我所拥有的，但我的仍然熄灭。

CSS

video#bgvid { 
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

HTML

<video autoplay loop poster="bg.png" id="bgvid">
    <source src="video/bg.mp4" type="video/mp4">
</video>

另一种方法是使用 js，但这是最后的手段。

Answer 1

从您提供的链接中，您缺少 background 属性，该属性将显示静态背景图像以防视频无法加载并覆盖整个页。并且您必须将 position: absolute 更改为 position:fixed 否则会造成溢出

请参阅下面的工作片段:

片段

#bg { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(http://lorempixel.com/1600/900) no-repeat;
    background-size: cover; 
}

<video autoplay loop poster="//lorempixel.com/1600/900" id="bg">
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/webm">
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>

如您所关注的链接所述:

Dealing With Mobile

Displaying the fullscreen background video on mobile devices presents several challenges:

• Most mobile platforms (iOS in particular) will refuse to autoplay HTML5 video to avoid potentially ruinous data charges.
• In such cases the video will be displayed with an embedded play button, which in turn...
• ...may capture touches on the device, locking out links that may be in the content on top of the video.

While it is possible to feature-detect support for video autoplay with JavaScript (a technique I will cover in a future article), the easiest solution is to use a media query that switches off the video entirely on smaller screens, substituting the placeholder image in the background

您可以使用此@media 查询添加:

#bg {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url(http://lorempixel.com/1600/900) no-repeat;
  background-size: cover;
}
@media screen and (max-width: 800px) { /*or max-device-width*/
  html {
    background: url(http://lorempixel.com/1600/900) #000 no-repeat center center fixed;
  }
  #bg {
    display: none;
  }
}

<video autoplay loop poster="//lorempixel.com/1600/900" id="bg">
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/webm">
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>