Add a video in your WordPress theme or website

As of WordPress 4.7, you can now add a video to your theme pretty easily. This feature is part of the custom header feature in WordPress, and it allows you to add a video from YouTube or by uploading an MP4 video.

Before committing to adding this to your site, one should consider the size of the video. Ideally, you should use YouTube to host the video, especially if you’re on shared hosting, because loading an MP4 file directly from your server could cause speed issues, depending on the file size.

How to add a YouTube or MP4 video to your WordPress theme ?

Add this code to your theme’s functions.php file, within the after_setup_theme hook callback. Once added, this code will create a new panel in the theme customizer “Header Media”. Within that, the option for adding a video will show up.

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

Next, to output the video, simply add this function call to wherever you want to output the video

the_custom_header_markup();

You will also need to style the player, let’s add some basic CSS to ensure that the custom header will show

.wp-custom-header iframe,
.wp-custom-header img,
.wp-custom-header video {
	display: block;
	height: auto;
	width: 100%;
        height: 400px;
}

Leave a Reply