Video Background in Genesis using Vide

In the members-only forum a user posted,

Sridhar,

I want to create a landing page on one of my Genesis sites (using eleven40 – http://my.studiopress.com/themes/eleven40/) that has a landing page with a video background. There are plenty of video background solutions (here is one I found on ProductHunt yesterday – https://rishabhp.github.io/bideo.js/) but I just need a little help on how I could create an interior landing page with a video background. The outcome I am looking for is:

– Landing page that includes only main navigation.
– Video background for that specific landing page.
– Be able to use the WYSIWYG editor to input content just like any other page.

Thanks!

I had a look at Bideo but found it not to be flexible. The problem is that the main content needs to be positioned relatively as an overlay rather than being free (position: static). Then I discovered Vide - a simple, straight forward jQuery script for background videos whether it is for the entire webpage or a div block.

In this tutorial we shall duplicate the Landing Page template of Eleven40 Pro as a Video Landing Page with the additional code for loading Vide and injecting a custom div.video above .site-container using genesis_before action hook. This div.video will have the data attribute for specifying the path to video files so the video element appears inside it. We shall use jQuery to set this div's width and height to that of browser viewport and use CSS to set its position to be fixed with a negative z-index so the content in .site-container appears on top.

Live Demo

While the tutorial has been written for Eleven40 Pro child theme it should work with minor adjustments in any Genesis child theme.

Step 1

Upload jquery.vide.min.js to the child theme's js directory.

Create a file named say, video-background.js in the same location having the following code to automatically set the width and height of div.video to viewport width and height: