如何修复超过 100vh 的英雄视频，尽管在野生动物园和火狐上工作，但只在 chrome 上播放

Question

我想有一个英雄视频，而不是顶部有一些动态文字的英雄图像。问题是视频只会在 chrome 上扩展到 100vh 以上，并且无法播放。我希望函数类似于以下内容： https://kriesi.at/themes/enfold-startup/#av_section_2，这就是我所拥有的： https://finag.sgedu.site/它在 safari 和 Firefox 上完美运行，但在 chrome 上则不然。这是我的问题的屏幕截图 https://i.stack.imgur.com/Nbjg9.jpg

我得出的结论是问题在于 chrome 如何调整窗口大小。如果我减小窗口，它最终将与 100vh 对齐并继续按预期工作。 页面在断点为 1024 https://i.stack.imgur.com/g2rOC.jpg 的 Chore 上按预期工作的屏幕截图 断点为 1440 的网页在镶版式上不起作用的屏幕截图

我的网页：

<div id="fullScreenDiv">
<video autoplay loop id="video">
<source src="hero.mp4" type="video/mp4">
</video>
<div id="messageBox">
<div class="hero container">
<h1>We Deliver</h1>
<h1 class="quotes">Authentic Experiences</h1>
<h1 class="quotes">Video and Audio Support</h1>
<h1 class="quotes">Meeting support and Set Up</h1>
<h1 class="quotes">Technology Maintenance </h1>
</div>
</div>
</div>
<div class="container">
<h1>Test 1</h1>
<h1>Test 2</h1>
<h1>Test 3</h1>
<h1>Test 4</h1>
<h1>Test 5</h1>
<h1>Test 6</h1>
<h1>Test 7</h1>
</div>

我的 CSS：

#fullScreenDiv {
padding: 0;
margin: 0;
background-color: gray;
position: relative;
}
#video {
width: 100vw;
height: 100vh;
object-fit: cover;
left: 0px;
top: 0px;
z-index: 1;
}

#messageBox {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
background: rgba(0, 114, 206, 0.5);
color: white;
}

.container {
max-width: 1300px;
margin: 0 auto;
padding: 0 16px;
position: relative;
}

.quotes {
display: none;
}
.hero {
text-align: center;
}
.container {
max-width: 1300px;
margin: 0 auto;
padding: 0 16px;
position: relative;
}
My JS (it does not directly affect the video but is for the dyanmic text placed in the center of the video)
$(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();

我希望结果与在 safari 或 Firefox 上的结果相同，但是，chrome 的行为完全不同，因为它不播放视频并让视频溢出其父div。

Answer 1

一种解决方案是：您可以尝试将 css 属性overflow: hidden添加到#fullScreenDiv元素，这样子视频就不会超出父视频