title: Javascript to stop HTML5 video download, restore source when video is played
body: <p>I'm working on a page that has multiple HTML5 video elements that popup in CSS modal boxes when a link is clicked. The page originally would begin download of every video on the page, but, after finding similar topics here, I was able to set the source to be src="", allowing the page to load quickly. 
  I'm having difficulty now trying to restore the download when a user selects a video and it pops up in the modal box.</p>
  
  <p>I'm not new to Javascript, but I'm also not proficient. Ideally, each video source should be set to "", then when the video is opened, the video should reload. I also added a function to pause the video when the modal is closed as it used to continue playing. Any help or criticism is appreciated, I'm here to learn. Thanks!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="image" style="float:left;margin:0;"&gt;&lt;a href = "#layers" id="showModal"&gt;&lt;img src="video-image.png" alt="Play visualization" width="150"/&gt;&lt;br /&gt;Layers&lt;/a&gt;
      &lt;div id="layers" class="modalDialog"&gt;
          &lt;div&gt; 
              &lt;a href="#close" class="close" id="closeModal"&gt;Close&lt;/a&gt;
              &lt;h3&gt;Layers&lt;/h3&gt;
              &lt;video id="videoContainer" class="videoContainer" loop="loop" style="width:698px;"&gt;
                  &lt;source src="video-file.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /&gt;
                  &lt;source src="video-file.webm" type='video/webm; codecs="vp8, vorbis"' /&gt;
                  &lt;source src="video-file.ogv" type='video/ogg; codecs="theora, vorbis"' /&gt;
              &lt;/video&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$(document).ready(function(){
  
   for(var i=0; i&lt; 20; i++)
   {
       document.getElementsByTagName("video")[i].src="";
   }
   $("#showModal").click(function() {
      var videoID = document.getElementsById("showModal").getAttribute('href');
      var videoElement = document.getElementsById(videoID).getElementsByTagName("video");
      videoElement.load();
  
      });
  
      $("#closeModal").click(function() {
          $("#videoContainer")[0].pause();             
      });
  });
  </code></pre>