This members-only tutorial provides the steps to use Video Headers feature introduced in WordPress 4.7 to display a YouTube video whose URL can be set in the Customizer as a background for a Section in Oxygen.


Live Demo

Note 1

This is the first tutorial that utilizes 3rd Party Design Sets or the "Library" feature introduced in Oxygen 2.3 Alpha 1.

This means that members simply go to +Add > Library > Design Sets and click on a button to import the completely built YouTube background Hero section as part of this tutorial.

As of today, Oxygen is at 2.3 RC1. This is a stable and officially supported version. Therefore, you could safely update your Oxygen to this version if you have not already. Make sure to take a full backup of your site prior.

Note 2

Video Headers feature in WordPress has been designed to be used on site's homepage although filters are available to change this behaviour.

If you need YouTube backgrounds on inner pages, you'd need to look into those filters or use Video Background Pro plugin.

Step 1

Let's enable support for custom header image or video and set the minimum viewport width to show the header video to 1025px (default is 900px).

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Video Header

Code:

This is a premium members-only content.

To view the rest of the content, please sign up for membership (one-time payment for lifetime access).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: