title: Multiple HTML5 Video Tags on 1 page
body: <p>I have a web page where the top of the page is a fullscreen div with a background of a video. I also have, further down the page another video (for testing purposes the same video).</p>
  
  <p>I have an interesting scenario to figure out...</p>
  
  <ul>
  <li>Video 1 (at the top of the page) works perfectly on Firefox, Safari, Chrome, IE</li>
  <li>Video 2 (half way down the page) works great on Firefox, Safari and IE. <strong>NOT Chrome</strong></li>
  </ul>
  
  <p>Due to the nature of my job I have to ensure that the websites I develop are browser safe. Does anyone know why 1 video would be working in Chrome but the other won't?  </p>
  
  <p><strong>AT TOP OF PAGE</strong></p>
  
  <pre><code>&lt;video id="video" poster="img/poster.png" loop muted class="video-js vjs-default-skin" preload="none" width="100%" height="100%" data-setup="{}"&gt;
      &lt;source src='img/video.mp4' type="video/mp4"/&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p><strong>HALF WAY DOWN PAGE</strong></p>
  
  <pre><code>&lt;video  id="s-video" poster="img/poster.png" loop muted class="bg_video video-js vjs-default-skin" preload="none" width="100%" height="100%" data-setup="{}"&gt;
      &lt;source src="img/video.mp4" type="video/mp4" /&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>I also have this bit of DOM Javascript at the bottom of my page</p>
  
  <pre><code>&lt;script&gt;
      document.getElementById('video').play();
      document.getElementById('s-video').play();
  &lt;/script&gt;
  </code></pre>