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 (да, да, это из учебника) Но что не так с изменением тута; -)

 /* 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%;
}

Теперь проблема в том, что код, который я использую, толкает текст вниз. Но я немного застрял там, и я хочу, чтобы контейнер вел себя так, как будто внутри него больше ничего нет. Просто не знаю комбинацию, чтобы заставить ее работать.

Надеясь, что кто-то может пролить немного света на мою проблему.

Скриншот моей проблемы:

• код сейчас немного запутанный, но сначала я пытаюсь заставить его работать на моем демо-сайте тестирования / разработки.