Safari 中的视频背景 HTML5

Question

我正在帮助建立一个网站，当您登陆该网站时，我们希望有一个视频背景。

它在 Google Chrome 上运行良好，但在 Safari 上无法正常运行。

这是网站（请与 chrome 和 safari 进行比较）：http://tinyurl.com/nbe8rzy

HTML 视频：

<video autoplay loop poster="polina.jpg" id="bgvid">
    <source src="<?php bloginfo('template_url'); ?>/assets/img/video1.mp4" type="video/mp4">
</video>

视频CSS：

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

我在视频上使用 z-index 为 1 的固定位置，在其余 div 上使用 z-index 高于 1 的相对定位（因此视频留在背景中）。

关于 safari 的问题：

1. 视频拉伸延迟
2. 其他 div 不显示

问题：

1. 我该如何解决这个问题？ （非常感谢代码/链接/帮助！）
2. 是否可以在手机/ipad 上使用视频背景？还是应该回退到图片？

Answer 1

将您的视频背景 div 更新为

#yourvideobackground { 
     position: absolute;
     top: 0px;
     left: 0px;
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     z-index: -1000;
     overflow: hidden;
}

要在包括 Safari 在内的大多数浏览器上解决并让视频正常工作，您必须为其指定一个绝对位置，并将其 z-index 设置在其上方的所有其他元素之下。

你也不能使用 background-size 属性，不能用于视频。

如果您想在另一个 div 中使用它，请确保父 div 设置了相对位置。

如果你不想走那条路，你可以使用我已经成功使用的漂亮插件。

https://github.com/Victa/HTML5-Background-Video

祝你好运！