title: Disable HTML 5 video from loading
body: <p>I have a setup where there is a background video displaying depending on the current weather conditions, shown here: <a href="http://pitfarmtennis.co.uk/cms/" rel="nofollow">http://pitfarmtennis.co.uk/cms/</a>.</p>
  
  <p>There are 6 different videos, currently the jQuery code to decide which to show just sets them to display:none, <strong>This sadly means all of them still load.</strong></p>
  
  <p>This is the jQuery that is currently making a certain video play, in this case a sunny video:</p>
  
  <pre><code>    /*Day-sun*/
      if((weather.code == "28")||(weather.code == "30")||(weather.code == "44")) {
          $('.home-bg-sun').css("display","inline");
      }
  </code></pre>
  
  <p>One solution I have tried is to set all of the src attributes in the HTML to data-src, and then changing the relevant one to src to fire the video, which hasn't worked to date, but I might have done something wrong:</p>
  
  <p>jQuery:</p>
  
  <pre><code>    /*Day-sun*/
      if((weather.code == "28")||(weather.code == "30")||(weather.code == "44")) {
          $('.home-bg-sun').attr('src', $('.home-bg-sun').attr('data-src'));
      }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="home-bg-sun"&gt;
      &lt;video class="home-bg-sun-video" autoplay loop poster="wp-content/themes/eddiemachado-bones-9db85e4/library/images/home-bg-sun-first_frame.jpg"&gt;
          &lt;source id="home-bg-sun-video-source" src="wp-content/themes/eddiemachado-bones-9db85e4/library/videos/home-bg-sun.webm" type="video/webm"&gt;
          &lt;source id="home-bg-sun-video-source" src="wp-content/themes/eddiemachado-bones-9db85e4/library/videos/home-bg-sun.mp4" type="video/mp4"&gt;
      &lt;/video&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any help would be much appreciated!</p>
  
  <p>PS: I am using Yahoo Weather to fetch weather conditions.</p>