Question

目前在我想要添加Airbnb的全屏视频背景的网站上工作。

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

在anther div中包装视频不起作用。

我尝试为@media quires设置不同的样式，但问题仍然存在于视频延伸到页面的位置。

我环顾四周，发现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属性，这些属性将显示静态背景图像，以防视频无法加载，并且cover整个页面。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>

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

正如您所关注的链接所述：

处理移动

在移动设备上显示全屏背景视频   几个挑战：


大多数移动平台（特别是iOS）会拒绝自动播放HTML5视频，以避免可能造成的数据损失。

在这种情况下，视频将显示一个嵌入式播放按钮，然后依次播放......

...可以捕获设备上的触摸，锁定可能位于视频顶部内容中的链接。


虽然可以使用功能检测支持视频自动播放   JavaScript（我将在以后的文章中介绍的一种技术），最简单   解决方案是使用完全关闭视频的媒体查询   在较小的屏幕上，替换占位符图像   背景

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

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

public function view_products() {

            $id = $this->uri->segment(3);
            $data['products'] = $this->user->viewprod($id);
            $this->load->view('product_viewpage', $data);

}

Answer 2

将位置absolute更改为fixed

video#bgvid { 
    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(polina.jpg) no-repeat;
    background-size: cover; 
}

<video autoplay loop poster="polina.jpg" id="bgvid">
    <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>

全屏HTML5视频背景离页

2 个答案:

段