JSFiddle - React, Tailwind, and code Playground

by Amos Wong

HTML

<video id="myVideo" controls>
  <source id='mp4' src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type='video/mp4'>
</video>

<div id="overlay">
  Something
</div>


<script>

//Shows link between seconds 5 and 10
var overlay = document.getElementById('overlay');
var video   = document.getElementById('myVideo');
var isPromoted = false;

  video.addEventListener('timeupdate', function() {
    console.log( video.currentTime );
    var show = video.currentTime >= 5 && video.currentTime < 10;
    
    if (!isPromoted) { // :Extra feature:
      // Try using display style?
	    overlay.style.display = show ? 'block' : 'none';  
    }
  }, false);
  
  overlay.addEventListener('click', function() {
  	var urlToOpen = 'http://stackoverflow.com/questions/14132122/open-url-in-new-window-with-javascript';
  	window.open(urlToOpen, '_blank');
    
    // Pause video using the video API
    video.pause();
    
    // :Extra feature:
    // You can also remove the overlay after it is clicked,
    // so that you don't need to implement a close button
    overlay.style.display = 'none';
    isPromoted = true;
  });
</script>

CSS

#overlay {
  position:fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  display: none;
}