This solution enables you to add a responsive video with cover text which overlays the video on all screen sizes.
In this case, we replace the background image with a video and custom text using a .json import and a few lines of custom CSS which produces what you see in the following screenshot :
Demo Video
Shows you how to follow the installation steps and replace the image background with a video with cover text.
Tested using the Monochrome Pro child theme by StudioPress however will work in any other Genesis child theme.
Installation Steps
This solution assumes you have setup your Monochrome Pro theme using the block editor and imported the demo content using the starter pack which includes setup your front page with a full width image background and overlaying text for the first section.
Go to your WordPress Dashboard > Genesis > Child Theme Setup to get started.
There’s 5 steps which you can view in the above demo video.:
- # Edit the front page and remove the default image background block which we’ll replace with a re-usable block for the video.
- # Upload your video to your WordPress Media library and copy the link to the video. Using a code editor, swap out all instances of the video link with the link to your own self hosted video. There should be 2 instances of this video URL.
- # Go to http://yourdomain/wp-admin/edit.php?post_type=wp_block and import the mp-video.json file as a re-usable block. Swap out your domain in the link to your own so it takes you to the reusable blocks page.
- # Edit your front page and insert the re-usable block named Monochrome Pro Video Overlay
- # Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.
That’s it! As seen in the demo video, you have replaced the section 1 image with a video background on your Monochrome Pro themes home page.
Was This Tutorial Helpful?