html - 带有视频背景的页眉，位置在 safari 中不起作用

Question

我正在尝试制作带有视频背景的标题。我在 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;}

希望有人能帮帮我!谢谢

Answer 1

如何将 object-fit:cover 添加到您的视频样式中:

video#bgvid {
    object-fit:cover;
}