In this article I provide details of displaying a ambient video as a background in a hero section on front page with a widget overlay in Genesis. Clicking on play button inside the widget will open a Vimeo video nearly full screen. When the user clicks anywhere around the video, it will pause and fade away. Clicking the play button again will bring up the large pop up with the video resuming from where it was left off.
While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.
Step 1
Upload your video files to be used as the background for hero section in mp4, ogv and webm formats to videos directory under your site's root.
Step 2
Create a js directory in your child theme (if it's not already present) and upload the following:
a) video.min.js
b) bigvideo.js
c) bigvideo-init.js:
