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. Live Demo
While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.
Step 1Upload your video files to be used as the background for hero section in mp4, ogv and webm formats to
videosdirectory under your site's root.
Step 2Create a
jsdirectory 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:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.