How to Make a Video Header in WordPress

WordPress introduced video header support in variant 4.7. Video header support isn’t available in WordPress, except if you use a WordPress theme with a video header feature. So if your ongoing theme doesn’t uphold video headers, you want to enable this feature by adding a couple of capabilities to make a video header in wordpress.

After activating the video header support choice in WordPress, you will have the choice to pick a video for the header in the Wp Customizer’s Header Media segment. WordPress upholds video files with a maximum size of 8 MB and in .mov and .mp4 formats. It is also conceivable to display a YouTube video as a header background.

Before you choose to include a video header on your WordPress website, consider the impact of video on your website’s loading pace and bandwidth. .mov and .mp4 files facilitated on your own website will significantly dial back your website’s loading speed.

In addition, if your website gets a great deal of traffic, you will rapidly reach your bandwidth limit. Therefore, we propose using brief videos of a maximum of 10 seconds and with enhanced file size. An improved arrangement is to use YouTube videos.

Enable Video Header Support in WordPress

To enable video header support in WordPress, all you really want to do is add the following code piece to your theme’s functions.php file.

/* Enable video header support */

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

You will see another button in the WP Customizer menu called Header Media. Its sub-menu offers to add a video from the media library or paste a YouTube video link. There is also a choice to choose a header background image. It is a decent practice to add a background image as a replacement for programs that don’t uphold video headers in WordPress.

Enabling video header support and adding a video and header background image isn’t yet finished. The following task is to add a capability to the WordPress template that displays the video header.

Display Video Header Inside WordPress Template

To display the video header in WordPress, introduce another template tag called the_custom_header_markup(). This template tag creates a component containing an image, video or iframe, depending on what we defined in the Customizer. The best practice is to add the_custom_header_markup() tag not long before the website header block.

Open your template’s header.php file and insert the following code scrap not long before the header tag:

<?php the_custom_header_markup() ?>

Of course, the_custom_header_markup() will display the header video on the homepage of the website and the predefined background image on other pages or posts. Of course, a play/pause button is also added to the WordPress video header. A portion of the default behavior of the_custom_header_markup() is conceivable by adding a couple of additional capabilities to the template.

Customization and Modifications

There are several customization choices for the behavior of the_custom_header_markup() tag. A few normal choices include:

  • Display video header just in predefined post types (main page, pages, posts)
  • Enable or disable the video header for a specific screen goal (for example, disable it for cell phones)
  • Customize video control buttons

To customize the video header, WordPress gives no settings in the Customizer. Customization is finished by adding the_custom_header_markup() capabilities to the functions.php file.

Definition of Post Types to Display Video Header in WordPress

Naturally, WordPress displays the video header just on the landing page. Other pages and posts display the header image defined in the Customizer. To defeat this behavior, we really want to create a capability that channels the post type and displays the video header just where we define it. Add the following code scrap to your functions.php file to display the video header on all pages and posts.

function custom_video_header_locations( $active ) {
if( is_home() || is_page() || is_single() ) {
return true;
}

return false;
}

Modify the code to set where you want the video header to appear by removing the parameters:

  • is_home() displays the video header on the home screen.
  • is_page() displays the video header on other pages.
  • is_post() displays the video header in posts.

Define the screening goal to display the video header

Of course, the WordPress video header will just display at a screen goal of 900 pixels or higher. Therefore, on cell phones, for example, smartphones and tablets, the video header isn’t displayed; to save bandwidth, the header image is displayed instead.

This default behavior can be customized by creating a channel capability and adding it to the functions.php file. With the following code piece, we will disable the display of the video header just on smartphones, assuming that the smartphone screen width isn’t higher than 420 pixels.

add_filter( 'header_video_settings', 'header_video_resolution');

function header_video_resolution( $settings ) {
$settings['minWidth'] = 420;
$settings['minHeight'] = 100;
return $settings;
}

Customize Video Play/Pause Button

It shows a play/pause control button in the WordPress video header. You can change the default button text to anything you like or translate the text to another language, for example. To customize the text of the play/pause video control button, add the following piece of code to your functions.php file and change the text according to your requirements.

add_filter( 'header_video_settings', 'my_header_video_settings');
function my_header_video_settings( $settings ) {
$settings['l10n'] = array(
'pause' => __( 'Pause video' ),
'play' => __( 'Start video' ),
'pauseSpeak' => __( 'Video paused'),
'playSpeak' => __( 'Video playing.'),
);
return $settings;
}

If you want to hide the play/pause button, add the following CSS rule to your theme’s template:

#wp-custom-header-video-button { display: none; }

Responsive Video Background

As a matter of course, WordPress never really makes your video header responsive. There is always some unwanted clipping in the video, and the level of the video header is usually fixed to a certain value. To make the video header responsive, we want to add some CSS rules to our template.

Also see: How to Create a Gaming Website with WordPress in 2022

If you’re displaying a video that you have yourself, this basic arrangement of CSS rules ought to display the video header in the most responsive formats:

Responsiveness is somewhat more complicated if you’re using a YouTube video as a video header. It may function admirably in one format yet not in another. The CSS code beneath will be great in many cases, especially for 16:9 videos. If it doesn’t work for you or you use a different video format, you may have to modify the code a little ( adjust the padding-bottom value):

Final Outcomes on Video Headers in WordPress

If done accurately, adding a video header to your WordPress site is a useful and visually enhancing feature. Make sure to advance the size of your header videos to diminish the impact on website loading speed. Using YouTube videos will have less impact on loading speed in many cases, yet can now and then be an issue regarding responsiveness.

You may also like...

Leave a Reply

Your email address will not be published.