PHPMatters Help You Better Hosting Your PHP-based Sites
How to Add a Video Background for WordPress Website

How to Add a Video Background for WordPress Website

Adding the video background to a webpage is one of the most popular web design trends in this year. Generally, webmasters use some flat images as the backgrounds. But now, many of them have realized the fact that no matter how great that image is, it is not as animated and attractive as a dynamic video. In this case, more and more webmasters are looking to insert a video component into their webpage backgrounds to achieve a strong impression for readers.

In the following, we’d like to come out the step-by-step guidance about how to add a video background for WordPress sites and pages.

Add Video Background for WordPress Homepage

The website homepage is the best place for adding a video background. To do this, we highly recommend you to install the mb.YTPlayer plugin. Note that this plugin only supports the YouTube videos.

Upon the successful installation and activation, you can go the Settings tab from your WordPress admin and click the mb.YTPlayer button. Here, you can find a series of settings to add a video as your homepage background.


Firstly, you should check the box for activating the background video function and insert the target video URL. If you want to display more than one video, you should use the comma to separate the URLs. Note that the videos are displayed randomly when people reach your homepage.

Next, you should decide the basic settings for the video display, including the display page, opacity, quality and aspect-ratio.

Basic Settings for Video Background

  • The display homepages include the static homepage and the blog index homepage. You can choose to add the video background to both or either of them.
  • Unless you have some special requirements, the video opacity would be better to be set as the value ”1”.
  • As for the video quality and aspect-ratio, you can leave them as default. This plugin automatically decides the best playback for you.

Then, you can configure some advanced settings for your background video. For instance, the video should start and end at which second, whether the video should be looped once ends, and whether the video should be muted with the corresponding audio files.

Video Display Settings

In fact, this plugin also allows you to decide whether to show a video control bar at the bottom of the page, whether to show the link to the original YouTube video, whether to track the video visits on Google Analytics, whether to stop playing when the window blurs and many more.

Add Video Background for WordPress Pages

Sometimes, you may only want the video backgrounds to be shown at some special webpages. Under this situation, you still can use the mb.YTPlayer plugin.

Upon the plugin installation, you can find an “Add a YTPlayer” icon from the Visual Editor of your editing page. After clicking it, you can get a pop-up window for video inserting.

Insert YTPlayer Shortcode

To begin with, you need to add the video URL and decide the video opacity, quality and aspect-ratio. Then, you need to check the box before “show controls” to enable the full-screen background video. Here, you can decide the showcase of the control bar and the original YouTube link.

Note that if you check the box of “Is inline”, the video cannot be displayed as a background, but a common video component at any location of your webpage, featuring the width and height as you wish.

Show Video Controls

Now, you can configure the starting/ending second of the video, decide whether to auto-play, loop and mute the video, as well as whether to pause the player on window blur and add the video views into Google Analytics tracking.

Once everything is configured properly, you can click the Insert Shortcode button and publish/update the page.