使用fullpage.js

Question

我的网站上有一个奇怪的问题。我尝试在jsfiddle中复制问题，但我不能。因此，我希望你们中的一些人可能知道为什么这个错误发生在我的网站上。

我想要做的基本上是这个jsfiddle但我最终得到的是http://nova-media.dk，我真的不明白为什么问题一直存在。我使用相同的库，html中的相同结构和相同的样式 - 因此我真的很难理解为什么背景视频保持这样的行为。

HTML：                                                                       

    <div id="fullpage" class="grid-wrap">
        <div class="section red-box">
            <div class="red">
                <h1>TEXT</h1>
            </div>
        </div>
        <div class="section green-box">
            <div class="green">
                <h1>MORE TEXT</h1>
            </div>
        </div>
            <div class="section red-box">
            <div class="red">
                <h1>TEXT</h1>
            </div>
        </div>
    </div>

CSS：

.red-box {
background-color: red;
opacity: 0.5;
}
.green-box {
    background-color: green;
    opacity: 0.5;
}

#video-bg {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    height: 100%;
    overflow: hidden;
    z-index: -100;

    -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px);
}
#bgVideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}
/* 1. No object-fit support: */
@media (min-aspect-ratio: 16/9) {
    #bgVideo { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
    #bgVideo { width: 300%; left: -100%; }
}
/* 2. If supporting object-fit, overriding (1): */
@supports (object-fit: cover) {
    #bgVideo {
        top: 0; left: 0;
        width: 100%; height: 100%;
        object-fit: cover;
    }
}

和JS：

$(document).ready(function() {
    $('#fullpage').fullpage({
        scrollingSpeed: 700,
        scrollBar: true,
        anchors:['red', 'green', 'blue']
    });
});