Adding a Video as Your Hero Image

Adding a video as your hero image

If you would like to add a video as your hero image, you can use externally hosted javascript libraries to accomplish this. Our guide will show you how to implement a video for your hero image using bigvideo.js ( http://dfcb.github.io/BigVideo.js/). Note also that the bigvideo.js website has more instructions on working with the library, and further tips on implementation. We recommend that you take a look after reviewing this guide.

1) Start by downloading the source files at http://dfcb.github.io/BigVideo.js/. These will need to be hosted somewhere in order for you to use them. Specifically, the libraries you need are:
  • video.js
  • imagesloaded.js
  • bigvideo.js
You will also need to host your video online. This can be done using our  file manager, or you can host the video somewhere else if you prefer.

Be sure to host all files on HTTPS. One advantage to using our file manager is that it will ensure that this is the case, but if you are hosting your files on another domain that doesn't have SSL protection but your domain does, it will compromise the security certificate that you have set up. 

2) Once you have downloaded and hosted the relevant javascript libraries as well as your video, they can be linked to from the 'Homepage' editor in your admin dashboard. Note that you will need to use some liquid markup to ensure that these libraries are loaded after jQuery. The markup looks like this:

{% content_for 'script' %}
  <script src ="link_to_your_js"></script>
  <script src ="link_to_your_js"></script>  <script src ="link_to_your_js"></script>{% end %}

Where anything in between the {% content_for 'script' %} and {% endcontent_for %} will be loaded after jQuery in the DOM.


3) Next, you will need to add a script that will handle playing your video. Specifically, this script will use Modernizr to check and see if the devise is a touchscreen, in which case it will not play the video (bigvideo.js doesn't play well on mobile, and your users will hate you for the data usage if you implement on mobile anyways). After it has determined that the user is not on a mobile device, it will initiate the video in place of the #hero element. Bigvideo.js has a few examples to get you going, but if you want to use a sample function, you can copy/paste the following:

  <script>
    if(!Modernizr.touch){
    var BV = new $.BigVideo({useFlashForFirefox:false, container:$('#hero'), doLoop: true});
    var video = 'your_video.mp4';
    BV.init(); 
    BV.show(video,{ambient:true});}
    BV.getPlayer().on('durationchange',function(){$('#big-video-wrap').fadeIn();});
  </script>

Be sure to replace 'your_video.mp4' with the url where you have hosted your video