Insert video on homepage slideshow

UPDATE: This article applies for old theme version before 2.0 (January 2017).

The theme doesn't have such feature built-in, but it's still possible to do this with a bit of tweaking. First of all, you need to open the homepage template, which is /templates/index.liquid and at the very top of the file, insert the following piece of code:

<div id="home-video" style="overflow: hidden;">
   <script type="text/javascript">
      jQuery(function($) {
          $(document).ready(function(){
             var video = $('#home-video video')[0];
            video.addEventListener('loadedmetadata', function(e){
               $(video).data('ratio', video.videoWidth / video.videoHeight);
               $(window).on('resize.videoResize', function(){
                  var minWidth = $(window).width() - ( $('#size-mobile').css('display') == 'block' ? 0 : 290 ),
                     minHeight = $(window).height(),
                     ratio = $(video).data('ratio'),
                     newWidth = 0,
                     newHeight = 0;
                  if ( minWidth / ratio >= minHeight ) {
                     newWidth = minWidth;
                     newHeight = minWidth / ratio;
                  } else {
                     newHeight = minHeight;
                     newWidth = minHeight * ratio;
                  }
                  $(video).css({
                     width: newWidth,
                     height: newHeight,
                     left: Math.round((minWidth - newWidth)/2),
                     top: Math.round((minHeight - newHeight)/2)
                  });
               }).trigger('resize.videoResize');
               $(video).delay(200).animate({'opacity': 1}, 400);
            });
          });
      });
   </script>
   <video style="position: relative; opacity: 0; display: block;" poster="" preload autoplay loop muted>
      <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
   </video>
</div>
 Shopify doesn't have an option for hosting videos on their servers (however an up to 20 MB video file can be uploaded in Settings > Files) so you need to upload this asset on your own server, or you could upload it on Dropbox.

The snippet above will add a fullscreen video on your homepage, above everything else that is already added there via basic theme options. You only have to change the video src to an absolute path of a video of your choosing. You should do the same for the poster attribute (which is blank in our example).

If you want to disable looping or mute, just remove the properties from the video object.

Please note that mobile devices don't have an "autoplay" option for videos, so for such devices the poster image will appear instead.

To see an example with a website using the homepage video, please follow this link: https://shoplucrativelifestyle.com/ .