HTML 5视频播放器作为引导容器中的背景

Question

我正在尝试创建一个引导容器，并且该容器应该具有视频。 但是，此时此刻我只能部分成功。

（理论上）我想要的是

<section>  <!-- this div features the background movie -->
<div class="container">
 <div class="row">
  <div class="col-md-12">
   Hey.. thats a good idea!!
  </div>
 </div>
</section>

现在我得到了以下代码：

HTML

<section class="parent-videocontainer">
    <div>           
        <video preload="preload" autoplay="autoplay" loop="loop">
            <source src="http://example.com/testvideo.mp4" type="video/mp4">
        </video> 
    </div>
    <div style="height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0px;"></div>
    <div class="video-messagebox container">

<div class="row">
<div class="col-md-12"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu id nunc egestas ultricies. Duis ac sollicitudin dolor, at molestie leo. Suspendisse in velit vehicula, convallis odio ac, maximus tellus. Sed augue lectus, facilisis mollis dui eget, imperdiet vulputate sem. Duis et tortor sed risus facilisis tempus. Curabitur elementum tellus non augue egestas finibus. Donec faucibus molestie fringilla. Maecenas in egestas dui. Sed viverra velit vitae imperdiet feugiat. Donec sed nunc et libero cursus ullamcorper. Donec eu ipsum nisl. Curabitur eu velit pellentesque, molestie massa nec, venenatis turpis. Morbi cursus pellentesque libero sed porttitor. Aliquam luctus nisi quis commodo molestie. In vestibulum finibus mauris, ac ultricies nisl.</p>
<p>Nam felis nulla, faucibus a consectetur et, finibus id orci. Mauris lacinia eros vel libero vestibulum luctus. Phasellus est urna, hendrerit sit amet ante non, lacinia tempor ante. Suspendisse lobortis enim ac neque volutpat convallis. Donec massa orci, volutpat quis eros nec, tristique lacinia dui. Sed commodo pharetra tincidunt. Sed pulvinar laoreet faucibus. Aliquam sit amet ex volutpat, efficitur justo in, ornare urna. Phasellus at mattis elit, non posuere arcu.</p></div>

</div>

    </div>
</section>

最后是CSS代码（是的，这来自于教程） 但是修改tut;-）

有什么问题

 /* Default to hide the video on all devices */
video{display:none}

.parent-videocontainer {
    width:100%;
    /* min-height: 100%;  */
   /* Set the height to match that of the viewport. */
    /* height: 100vh; */
    padding:0!important;
    margin: 0!important;
    position: relative;
}
.parent-videocontainer>div>video { 
    width: 100%; 
    height: auto;
    object-fit: cover;
    left: 0px;
    top: 0px;
    z-index: 1;
}

@media (min-aspect-ratio: 16/9) {
  .parent-videocontainer>div>video {
    height: 150%;
    top: -100%;
  }
}
@media (max-aspect-ratio: 16/9) {
  .parent-videocontainer>div>video {
    width: 100%;
    left: -100%;
  }
  #videosubstitute{display:block;width:auto;height:100%;}
}
/*if there is 992  pixels or more, then display the video but hide the image*/
@media only screen and (min-width : 992px) {
    .parent-videocontainer>div>video {
        display:block;
    }
}   
/* The container for our text and stuff */
.parent-videocontainer>.video-messagebox {
    position: absolute;  top: 0;  left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height:100%;
}

现在的问题是，我使用的代码将文本下推。 但是我在那儿停留了一点，我希望容器表现出来就像容器中没有其他东西一样。只是不知道要使用它的组合。

希望有人可以对我的问题有所了解。

我的问题的屏幕截图：

• 现在的代码有点混乱，但是首先我想让它在我的演示测试/开发网站上运行。