Adding a video header to WordPress themes
Header images are nothing new, but header videos are coming into fashion. Adding a video header to WordPress Themes can highlight your product or service in a new or innovative way.
The theme that I will be using is twenty twenty and it does not have video support for the header. Since I made a child theme I will be using that to modify the files.
Here are the steps to follow
-
- Open up the themes/twenty-twentychild/functions.php file with a code editor
- Add the following line of code and save the file –
-
add_theme_support (‘custom-header’. array (
‘video” => true,
) ); - Log into the WordPress dashboard as the administrator
- Click the Appearance menu
- Choose the Header Media option to open the customizer
- Click Select Video to upload the video
- Choose the video after uploading it and add it to the customizer
- Now the header video will be shown in the header media section
- Click Publish
- Open the Header.php file in the child theme and add the following code –
< div class=”header-titles” >
<!– New code –>
<div class=”custom-header-media” >
< ?php the_custom_header_markup(); ? >
</div>
<!– New code –>
<div class=”custom-header-media” >
< ?php the_custom_header_markup(); ? >
</div>
Open the style.css file and add the following code –
.wp-custom-header video,
.wp-custom-header img,
.wp-custom-header iframe,
height: 300px !important;
width: auto;
}
@supports (object-fit: cover ) {
.wp-custom-header video,
.wp-custom-header img,
.wp-custom-header iframe,
height: 300px !important;
left: 0;
top: 0;
-o-object-fit: cover;
width: 100%;
}
}
.wp-custom-header img,
.wp-custom-header iframe,
height: 300px !important;
width: auto;
}
@supports (object-fit: cover ) {
.wp-custom-header video,
.wp-custom-header img,
.wp-custom-header iframe,
height: 300px !important;
left: 0;
top: 0;
-o-object-fit: cover;
width: 100%;
}
}
Save the changes and refresh the customizer Header media section, now you will see the video in your theme.
References/Resources: