Menu icon Foundation
Load Video Faster

I have a video as the main page on my website http://twentyonemedia.com/
but it takes quite some time to load - would be very great full for some tips to make it load faster or build in a pre-loader.

mp4 = 17.5MB
ogg = 13.3MB
webM = 11.3MB

<div class="row">
<div class="hide-for-small"><br>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="js/jquery.backgroundvideo.min.js"></script>
<script>
  $(document).ready(function() {
    var videobackground = new $.backgroundVideo($('body'), {
      "align": "centerXY",
      "width": 1280,
      "height": 720,
      "path": "video/",
      "filename": "splash720",
      "types": ["mp4","ogg","webm"]
    });
  });
</script>
</div>
            

         

VideoPre-loadsplash screen

I have a video as the main page on my website http://twentyonemedia.com/
but it takes quite some time to load - would be very great full for some tips to make it load faster or build in a pre-loader.

mp4 = 17.5MB
ogg = 13.3MB
webM = 11.3MB

<div class="row">
<div class="hide-for-small"><br>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="js/jquery.backgroundvideo.min.js"></script>
<script>
  $(document).ready(function() {
    var videobackground = new $.backgroundVideo($('body'), {
      "align": "centerXY",
      "width": 1280,
      "height": 720,
      "path": "video/",
      "filename": "splash720",
      "types": ["mp4","ogg","webm"]
    });
  });
</script>
</div>