Adding a video header to the theme

The website header is one of the most important places where you can highlight the most important content and attract visitors to the site. Using header images to give users a visual overview of the site is a common feature in many sites. The use of videos is becoming a trend and taking over the use of normal images. Header videos can be effectively used to give a quick and detailed overview of your product or company, compared to static images.

The latest introduction of video headers in WordPress 4.7 simplifies the process of adding a video to the header section. This is a built-in feature that needs to be enabled through the theme.

In this recipe, we are going to add header video support and display a video in the header section of the site.

Getting ready

Open the code editor and make sure you have access to the theme files in your local or external WordPress installation.

How to do it...

The availability of the header videos feature depends on the theme. We are going to use the Twenty Twenty Child theme for this recipe. The header video feature is not supported by default in the Twenty Twenty theme. Due to this, we have to add support to our child theme. Follow these steps to do so:

1. Open the wp-content/themes/twentytwentychild/functions.php file with your code editor.
2. Add the following lines of code to the end of the file to add support for a header video and save the file:

add_theme_support( 'custom-header', array(
 'video' => true,
) );

3. Log in to the WordPress Dashboard as an administrator.
4. Click the Appearance menu.

5. Click the Header option to open the Theme Customizer, as shown in the following screenshot:

6. Click the Select video button to open the media uploader.
7. Upload a .mp4 video from your computer.
8. After uploading is completed, click the Choose Video button to add the video to the customizer.
9. Also, use the Add new image button to upload an image for the header. This image will be displayed when there is a delay in displaying the video.

10. Now, the header video will be shown in the Header Media section, as shown in the following screenshot. The image or video will not be visible in our child theme at this stage:

11. Click Publish button to save the changes.
12. Open the header.php file inside the child theme and find the following code, which is used for displaying the header of the site:

<div class="header-titles">
  <!-- Step 13 code should be placed in the next line -->
 
  <?php
    // Site title or logo.
    twentytwenty_site_logo();
    // Site description.
    twentytwenty_site_description();
  ?>
</div><!-- .header-titles -->

13. Add the following code after the comment "Step 13 code should be placed in the next line". This code is used to add the HTML for the header video:

 <div class="custom-header-media">
 <?php the_custom_header_markup(); ?>
 </div>

14. Open the style.css file of the child theme and add the following code at the end of the file. The code is used to display the header video with proper positioning:

.wp-custom-header video,
.wp-custom-header img,
.wp-custom-header iframe {
 position: fixed;
 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;
 object-fit: cover;
 width: 100%;
 }
}

15. Save the changes and refresh the customizer Header Media section.

Now, you will see the uploaded video in the header section of our child theme. The video will play automatically when the page is loaded.

How it works...

The header video feature is disabled by default. We have to enable it using the theme. Some themes provide built-in support for video headers, while other themes require manual configuration to enable video headers. The Twenty Twenty theme we are using throughout this chapter doesn't have built-in support for header videos. So, we have to enable header videos by adding the following code to the functions.php file:

add_theme_support( 'custom-header', array(
 'video' => true,
) );

We can pass the custom-header parameter to the add_theme_support function to enable custom headers in a customizer. This can be either an image or a video header. We enable video support by passing video => true as a parameter. Once this code is added, your theme will display the header section in the customizer with the ability to upload both images and videos.

At this stage, we can upload a video. However, it's not visible on the theme as the Twenty Twenty theme doesn't support header videos. Then, we added the following code to the header.php file of the theme to enable the header video content inside the theme:

<div class="custom-header-media">
 <?php the_custom_header_markup(); ?>
</div>

This function outputs the HTML elements that are needed to display the video in the header. At this stage, the video will be visible on the theme. However, the design would look unpleasant as the video would be displayed in one section of the header.

Due to this, we added the CSS code in step 14 to the style.css file of the theme to align the video and display it across the whole header. Once you refresh the browser, the video will be displayed in the header and start playing immediately. We can adjust the CSS as needed for our requirements and design.

Before you move on to the next recipe, remove the header video and remove the custom CSS we used for the header video in the style.css file.