我正在尝试制作带有视频背景的标题。我在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;}
希望有人可以帮助我! 谢谢
答案 0 :(得分:0)
如何为您的视频风格添加object-fit:cover
:
video#bgvid {
object-fit:cover;
}