title: Stop/Play on DIV show/hide HTML5 Video
body: <p>You've all been so great in helping me in the past and I'm hoping we can solve this next problem as well. </p>
  
  <p>I am building a slideshow of sorts using videos as backgrounds instead of images. Everything is working perfectly except that the timing of the videos is off because even though my divs are hidden the videos are all playing at the same time.</p>
  
  <p>So, what I need is a JS/jQuery solution to stop (not pause) and play the videos as the divs are hidden/shown. Here's my code so far:</p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/Z2Nq8/1/" rel="nofollow">http://jsfiddle.net/Z2Nq8/1/</a></p>
  
  <p>JS:</p>
  
  <pre><code>$(function () {
  
  var counter = 0,
      divs = $('#video1, #video2, #video3');
  
  function showDiv () {
      divs.hide() 
          .filter(function (index) { return index == counter % 3; }) // figure out correct div to show
          .show(); 
  
      counter++;
  }; 
  
  showDiv();     
  
  setInterval(function () {
      showDiv(); 
  }, 7 * 1000);     
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>`&lt;div id="videocont"&gt;
      &lt;div id="video1" class="display"&gt;
          &lt;video autoplay loop poster="PHI.png" id="bgvid"&gt;
          &lt;source src="URL/video.mp4" type="video/mp4"&gt;
          &lt;/video&gt;
               &lt;div id="title"&gt;Headline text.
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="video2" class="display"&gt;
          &lt;video autoplay loop poster="PHI.png" id="bgvid"&gt;
          &lt;source src="URL/video.mp4" type="video/mp4"&gt;
          &lt;/video&gt;
               &lt;div id="title"&gt;Headline text.
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="video3" class="display"&gt;
          &lt;video autoplay loop poster="PHI.png" id="bgvid"&gt;
          &lt;source src="URL/video.mp4" type="video/mp4"&gt;
          &lt;/video&gt;
               &lt;div id="title"&gt;Headline text.
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;`
  </code></pre>
  
  <p>Thanks!</p>