title: How to preload a fullscreen background video with a javascript preloader?
body: <p>I am trying to <a href="https://github.com/niklausgerber/PreLoadMe" rel="nofollow">preload (PreLoadMe)</a> a full-screen background video implemented with <a href="http://dfcb.github.io/BigVideo.js/" rel="nofollow">BigVideo.js</a>.
  The preloader animation is working, but when the animation has finished, the background-video starts loading, which suggests that the content of the website has not been preloaded.</p>
  
  <p>Unfortunately, my Javascript knowledge is very limited, so I would appreciate your input how to correctly load the video with the preloader.</p>
  
  <p>Here is my <strong>Javascript</strong>:</p>
  
  <pre><code>&lt;!-- Preloader --&gt;
  
  &lt;script&gt;
      $(window).load(function() { // makes sure the whole site is loaded
          $('#status').fadeOut(); // will first fade out the loading animation
          $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
          $('body').delay(350).css({'overflow':'visible'});
      })
  &lt;/script&gt;
  
  
  &lt;!-- BigVideo --&gt;
  
  &lt;script&gt;
  
  $(function() {
          var BV = new $.BigVideo({useFlashForFirefox:false});
          BV.init();
  if (Modernizr.touch) {
              BV.show('http://localhost/../img/background-dock.jpg');
          } else {
              BV.show('http://localhost/../vid/skiing.mp4', {altSource:'http://localhost/../vid/skiing.ogv', ambient:true});
          }
  });
  &lt;/script&gt;
  </code></pre>