title: custom html5 video controls jquery
body: <p>I have found the following code to add custom html5 video controls.</p>
  
  <p>html:</p>
  
  <pre><code>    &lt;div&gt;
  &lt;video id="video" controls&gt;
     &lt;source src="/images/videos/LargeRoom.mp4" type="video/mp4"&gt;
     &lt;source src="grass-in-the-wind-sma.webm" type="video/webm"&gt;
  &lt;/video&gt;
  
  &lt;div id="controls"&gt;
  &lt;button id="playpause" title="play" onclick="togglePlayPause()"&gt;Play&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;div&gt;
  &lt;video id="video" controls&gt;
     &lt;source src="/images/videos/LargeRoom.mp4" type="video/mp4"&gt;
     &lt;source src="grass-in-the-wind-sma.webm" type="video/webm"&gt;
  &lt;/video&gt;
  
  &lt;div id="controls"&gt;
  &lt;button id="playpause" title="play" onclick="togglePlayPause()"&gt;Play&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>and the following javascript:</p>
  
  <pre><code>   // Grab a handle to the video
     var video = document.getElementById("video");
     // Turn off the default controls
     video.controls = false;
  
  
     function togglePlayPause() {
     var playpause = document.getElementById("playpause");
     if (video.paused || video.ended) {
        playpause.title = "pause";
        playpause.innerHTML = "pause";
        video.play();
     }
     else {
        playpause.title = "play";
        playpause.innerHTML = "play";
        video.pause();
     }
  }
  
  video.addEventListener('play', function() {
     var playpause = document.getElementById("playpause");
     playpause.title = "pause";
     playpause.innerHTML = "pause";
  }, false);
  video.addEventListener('pause', function() {
     var playpause = document.getElementById("playpause");
     playpause.title = "play";
     playpause.innerHTML = "play";
  }, false);
  </code></pre>
  
  <p>The issue I am having is that both play/stop buttons control the top first video. As oppose to each controlling their own video.</p>