我正在帮助建立一个网站,我们希望在您登陆网站时拥有视频背景.
它在谷歌浏览器上运行得很好,但它在Safari上无法正常工作.
这是网站(请与chrome和safari进行比较):http://tinyurl.com/nbe8rzy
HTML视频:
视频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的相对定位(因此视频保留在后台).
野生动物园的问题:
视频拉伸延迟
其他div没有显示
问题:
我怎样才能解决这个问题?(代码/链接/帮助非常感谢!)
是否可以使用移动/ ipad的视频背景?还是应该回退到图像?
小智.. 8
将您的视频背景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
祝好运!
将您的视频背景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
祝好运!