网页未显示背景

问题描述

我正在他在Udemy的引导训练营中进行Colt Steele的aurora树林项目。我不想使用他在项目中使用的背景图像，而是要使用自己的背景视频。我已经像他一样插入了它，但是由于某种原因它没有出现。我可以共享该项目的github链接： https://github.com/Kazim786/sarah-calligraphy

以下是其他人部署的完成的colt steele项目的链接：https://aurora-grove.herokuapp.com/index.html （需要在视频中插入视频来代替脚尖图片）

以下是插入背景视频的代码： （#showcase是我插入视频链接的位置） 此项目中也使用了考拉

body {
    font-family: cursive;;
    background: pink;
}

.navbar {
    font-weight: 100;
    .navbar-brand h3{
        font-weight: 100;
    }
    .nav-item{
        font-size: 1.4rem;
    }
    .nav-link:hover{
        transition: border 0.2s;
        border-bottom: 1px solid white;
    }

}

#showcase {
    background: url("../media/video-1599785729.mp4") bottom center / cover no-repeat;
    min-height: 750px;
    h1{
        font-family: cursive;
        line-height: 1;
    }

    #book{
        font-size: 1.5rem;
        border-radius: 2rem;
    }

    }




@media(max-width: 760px){
    .navbar{
        background: #1f1f1f;
        .nav-link:hover {
            border-bottom: none;
        }
    }
    #showcase {
        min-height: 500px;
        h1{
            font-size: 4rem;
        }
    }
}

请让我知道是否还需要HTML，我将在此处进行编辑

解决方法

为什么不使用视频标签呢？那肯定会起作用。确保将视频绝对定位在#showcase容器中，如下所示：

<section id="showcase" class="d-flex align-items-center justify-content-center">
    <video style="
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
" controls=""><source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"></video>
      
... (rest of the code)...
      
</section>