Can't get video to go behind image in the same <div> container

Issue

I am relatively new to HTML/CSS and I have written some code to create a website. If you can help me with this please help. I am trying to get a video to be a background video behind two images and two header tags. However, my video keeps on showing up in another section, but not in the same container that I have put everything in. This is my write up. If you can, please let me know where I am going wrong. I followed a couple examples from w3schools.com, and looked up some steps on CSS-tricks.com as well as read up and followed a couple examples from stackoverflow's community which helped me to get the image on the page. But I just don't know where or what I am doing wrong why it won't line up behind the image nor stay within the same container. If you can help me, that would be greatly appreciated. Thanks.

My HTML for that section:

<div class="eldersaac">
   <div class="container">
        <div class="firstImage">
            <img src="http://picapi.ooopic.com/10/61/88/66b1OOOPIC41.jpg" />
            <h3>Elder Priest Esaias Ben YAHUDAH Y'ISRAEL</h3>
        </div>
        <div class="secondImage">
            <img src="https://www.inspiringwallpapers.net/content/uploads/normal-h500/tall-rock-island.jpg" />
            <h3>Isaac Ben YAHUDAH Y'ISRAEL</h3>
        </div>
        <div>
            <video class="cover" preload="none" autoplay >
                <source src="https://www.youtube.com/watch?v=cc7Oq06AqLU" type="video/mp4" >
                <source src="https://www.youtube.com/watch?v=cc7Oq06AqLU" type="video/webm" >
            </video>
        </div>
   </div>
</div>

This is my CSS for that section. I will put a test video for example purposes.

    .eldersaac {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 0;

    .eldersaac .container {
        position: relative;
        margin: 0 auto;
        max-width: 100%;
        text-align: center;
        height: auto;
    }

    .cover {
        width: 100%;
        height: auto;
        z-index: -1;
    }

    .firstImage {
        float: left;
        width: 50%;
    }

    .secondImage {
        float: left;
        width: 50%;
    }

    .firstImage img {
        width: 75%;
        padding: 0;
        margin: 100px 10px 5px 30px;
        border: 4px solid #e9bf22;
        border-radius: 15px;
    }

    .secondImage img {
        width: 75%;
        padding: 0;
        margin: 100px 10px 5px 30px;
        border: 4px solid #e9bf22;
        border-radius: 15px;
    }

    .firstImage h3 {
        font-family: 'Eagle Lake', Garamond, cursive, sans-serif;
        color: #fff;
        font-weight: 200;
        font-size: 25px;
        padding: 20px 0;
        margin: 0 0;
        display: block;
        text-shadow: 2px 2px #0315C6;
    }

    .secondImage h3 {
        font-family: 'Eagle Lake', Garamond, cursive, sans-serif;
        color: #fff;
        font-weight: 200;
        font-size: 25px;
        padding: 20px 0;
        margin: 0 0;
        display: block;
        text-shadow: 2px 2px #0315C6;
    }

Solution

Do you want the video to be played at the background and other content overlap on video? Here is a codepen link.

Answered By - M Thomas