Menu with background video overlay

index.html

<div id="myNav" class="overlay-primary">

<div class="videoContainer">
<div class="overlay-vid-1"></div>
<a href="javascript: void(0)" class="close" onclick="closeNav()">&times;</a>
 <div class="overlay-content">
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>

  </div>

<video autoplay loop muted>
        <source src="http://inserthtml.com/demos/javascript/background-videos/flowers.mp4" type="video/mp4">
            <source src="http://inserthtml.com/demos/javascript/background-videos/flowers.webm" type="video/webm">
    </video>
</div>
</div>

  
<button onclick="openNav()" class="open">MENU</button>

Menu with background video overlay.markdown

Menu with background video overlay

A Pen by ne.mmoj on CodePen.

License.

script.js

var nav = document.getElementById("myNav");

function openNav() {
    nav.style.width = "100%";
}

function closeNav() {
    nav.style.width = "0";
}

style.css

.overlay-primary {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0, 0.7);
    overflow-x: hidden;
    transition: 1s;
}

.overlay-content {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
}

.overlay-primary a {
    paddding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 1s;
}


.videoContainer {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 1px;
    overflow: hidden;
}
.videoContainer video {
    min-width: 100%;
    min-height: 100%;
    position: absolute; /* Change to absolute */
    top: 0px;           /* Set top to 0px */
    z-index: -5;
}
.videoContainer .overlay-vid-1 {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -4;
    background: black;
    opacity: 0.5;
}


.overlay-primary a:hover,
.overlay-primary a:focus {
    color: #f1f1f1;
}

.overlay-content a {
    margin-top: 16px;
}

.close {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px !important;
    
}

@media screen and (max-height: 450px) {
    .overlay-primary a {
        font-size: 20px !important;
    }
    
    .close {
        font-size: 40px !important;
        top: 15px;
        right: 35px;
    }
}

.open {
    display: block;
    font-size: 36px;
    line-height: 36px;
    outline: none;
    padding: 8px;
    border-radius: 5px;
    border: 0;
    color: #fff;
    margin: 1em auto;
    cursor: pointer;
    background: #000
}

.open:hover {
    color: #f1f1f1;
}