Full Width Video for Desktops and Mobiles in Genesis Sample Theme

This code enables you to add 2 videos to the front page of the Genesis Sample child themes by StudioPress. The code :

1. Adds 2 video upload fields to the customizer for desktop and mobile devices.
2. Adds a responsive text overlay on top of your full width video.

Video Demo

Shows the markup output when a video is uploaded to the customizer and displayed full width of screen with a text overlay hard coded into the PHP function. Includes video upload fields for both desktop and mobile screens.

Tested using the Genesis Sample child theme by StudioPress.

Installation

There’s 3 steps :

1. Upload the hero.js file to your Genesis Sample theme folder.
2. Copy and paste the PHP from functions file ( excluding the opening PHP tag ) to the end of your Genesis Sample child themes functions.php file.
3. Copy and paste the CSS to the end of your Genesis Sample themes style.css file and clear caching.

You can then upload your videos in the customizer as seen in the demo video.

Download Folder

Related Tutorials

• Video Background With Full Screen Text Overlay – Genesis