title: Pause video when clicking an overlay element
body: <p>I am working on a video where during some seconds, an overlay element appears to promote a product. </p>
  
  <p>I would like to know if is possible to pause the video when someone clicks the overlay element and at the same time this will display a window showing the product details. So:</p>
  
  <ol>
  <li>Video plays and displays an overlay element</li>
  <li><p>User clicks the overlay element so:</p>
  
  <p>2.1: Video pauses on the background</p>
  
  <p>2.2: Overlay element opens a window over the paused video to show the product details.</p></li>
  </ol>
  
  <p>This is my code where the video shows the overlay element for a few seconds during the video:</p>
  
  <pre><code>&lt;video id="myVideo" controls&gt;
    &lt;source id='mp4' src="video.mp4" type='video/mp4'&gt;
  &lt;/video&gt;
  
  &lt;div id="overlay"&gt;
    Something
  &lt;/div&gt;
  
  
  &lt;script&gt;
  
  //Shows link between seconds 5 and 10
  var overlay = document.getElementById('overlay');
  var video   = document.getElementById('myVideo');
  
    video.addEventListener('timeupdate', function() {
      console.log( video.currentTime );
      var show = video.currentTime &gt;= 5 &amp;&amp; video.currentTime &lt; 10;
      overlay.style.opacity = show ? '1' : '0';
  
    }, false);
  &lt;/script&gt;
  </code></pre>