Video Background With Full Screen Text Overlay – Genesis


Category: Tags: ,

This code displays a MP4 Self hosted video behind your site header elements in the Genesis Sample child theme by StudioPress. The solution also allows you to add responsive content over your video.


You can also :

  • Add a unique video on any single page/post type.
  • Add a unique video on any archive page type.
  • Add a default video fallback.
  • Add default overlaying text.
  • Use ACF to add unique videos & content on any page/post type.
  • Optionally display your video behind your site header or below it.

The video you add to your customizer will display by default if none added using ACF or if ACF becomes deactivated.

Hero Video Background for Genesis


There’s 4 steps :

Step 1 : Using the advanced custom fields ( ACF ) plugin, import the acf-110417.json file.

Step 2 : Upload the file named hero.js to your child theme folder.

Step 3 : Copy & paste the PHP code from functions.php to the end of your Genesis child themes functions file.

Step 4 : Copy & paste the CSS from style.css to the end of your child themes stylesheet and remember too clear caching.

View what the code does before you checkout.

Watch Demo Video