Javascript 如何修复英雄视频超过100vh，并且不在safari和Firefox上工作的情况下仅在chrome上播放

我想有一个英雄视频，而不是一个英雄形象与一些动态文字的顶部。问题是，该视频仅在chrome上扩展到100vh之外，无法播放。我希望函数与此类似：，这就是我所拥有的：它在safari和firefox上可以完美工作，但在chrome上不能。这是我的问题的截图

我得出结论，问题在于chrome如何重新调整窗口大小。如果我缩小窗口，它将最终与100vh对齐，并继续按预期方式工作。页面按计划工作的屏幕截图，断点为1024 不在chrome上运行且断点为1440的页面截图

我的HTML：

---

不过，我希望结果与safari或firefox上的结果一样，chrome的行为完全不同，它不播放视频，并且视频溢出了其父div。

一个解决方案是：您可以尝试将css属性添加到

#fullScreenDiv

元素中，这样子视频就不会超出父级一个解决方案是：您可以尝试将css属性添加到

#fullScreenDiv

元素，这样子视频就不会超出父视频了

嘿，谢谢你的提示！！！！这实际上解决了主要问题。这段视频还没有在Chrome上播放，但我想我现在可以弄清楚了。再次感谢你！你需要在视频上设置

mute

html属性，这样Chrome才能正常播放视频。如果我的回答有帮助，请考虑接受回答，谢谢。非常感谢。我对使用这个平台有点陌生，我试图“升级”它，但系统不让我使用，因为我的帐户是多么新。抱歉花了很长时间才弄明白，我想我必须点击复选标记。嘿，谢谢你的提示！！！！这实际上解决了主要问题。这段视频还没有在Chrome上播放，但我想我现在可以弄清楚了。再次感谢你！你需要在视频上设置

mute

html属性，这样Chrome才能正常播放视频。如果我的回答有帮助，请考虑接受回答，谢谢。非常感谢。我对使用这个平台有点陌生，我试图“升级”它，但系统不让我使用，因为我的帐户是多么新。很抱歉花了很长时间才弄明白，我想我必须点击复选标记。

<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>

#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();
            })();