JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <video controls autoplay id="myvideo">
      <source type="video/mp4" src="http://www.recado.ee/wp-content/uploads/2015/02/video.mp4"/>
     </video>
    <div class="nav" id="endframe">
        <ul>
            <li><a href="#">Products</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Gallery</a></li>
        </ul>
    </div>
</div>

CSS

#container {
    width: 100%;
    position: relative;
    margin: auto;
}
#container video {
    width: 100%;
}
#endframe {
    position: absolute;
    top: 0;
    width: 100%;
    visibility: hidden
    
}

.nav ul {
  list-style: none;
  background-color: #000;
  text-align: center;
  padding: 50;
  margin: 0;
}
.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888;
}
 
.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}
 
.nav a:hover {
  background-color: #005f5f;
}
 
.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
 
@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 40px;
    line-height: 40px;
    font-size: 1.4em;
  }
 
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
 
  
}

JavaScript

var video = document.getElementById("myvideo");   
var endframe = document.getElementById("endframe");

function init() {   
    video.onended = function(e) {
        document.getElementById("endframe").style.visibility = "visible";
    }; 
}
init();