Video Behind Header In Twenty Twenty One Theme

This code enables you to add a video behind the site header of the Twenty Twenty One WordPress theme like this :

2 video upload fields are added to the customizer enabling easy upload of MP4 videos for your site header background. 1 is shown behind your header on desktops and the other on smaller mobile screens & hand held devices.

Demo Video

Shows the desktop MP4 video added to the customizer settings displaying behind the site header on the front page and the mobile video displaying on smaller screens.

Coming Soon!

Tested using the Twenty Twenty One child theme for WordPress.

Installation Steps

There’s 3 steps :

1. # Upload the header.php file to your Twenty Twenty One child theme like this

 


2. # Copy & paste the PHP code ( without the opening PHP tag ) to the end of your Twenty Twenty One child themes functions file.

 


3. # Copy & paste the CSS from the style.css file to the end of your Twenty Twenty One child themes style sheet and clear caching.

 

Download Folder

No Child Theme?

You can install the folder named twenty-twenty-one-child, located inside the download folder, as a new theme and activate it. After activation, you can add your videos via customize > Front Page Video as seen in the demo video and this screenshot.

Related Video Tutorials

• Different Video For Desktop & Mobile