标题与视频背景,位置不在野生动物园工作

时间:2014-11-08 14:08:08

标签: html css video background header

我正在尝试制作带有视频背景的标题。我在html中插入了一段视频,并在css中制作了视频的z-index -100。

目前谷歌浏览器的效果非常好,但如果我在safari中打开我的网站,那么视频背景的位置是完全错误的。

我无法解决这个问题,所以两个浏览器都会显示相同的内容。

网站可以在这里看到:http://www.chatroom.guru

这是我的HTML:             <header> <video autoplay loop poster="polina.jpg" id="bgvid"> <source src="/img/headerbgvideo.mp4" type="video/mp4" id="bgvid"> </video> <div class="container"> <p id="title1">Connect with the world today!</p> <p id="title2">Join the world's best social chatroom for gamers.</p>

这是我的CSS:

video#bgvid {
position: absolute;
margin-top: -90px;
width: 100%;
z-index: -100;}

希望有人可以帮助我! 谢谢

1 个答案:

答案 0 :(得分:0)

如何为您的视频风格添加object-fit:cover

video#bgvid {
    object-fit:cover;
}