What's WP
Our everything is about WordPress - best choice of WordPress users!
How to Add Background Video to WordPress?

How to Add Background Video to WordPress?

WordPress as a blogging platform never ceases to amaze the users thanks to the great developments that are witnessed very often, among which the background video function on WordPress posts has an effect on the online readers.

The videos lure people and hold their attention into the website, as well as giving the story to them before they even reading a word on the blog post. However, most bloggers find it a challenge to make the background videos work on their posts, and thus end up giving up.

For this topic, below is a simplified way on how to add a WordPress background video with ease.

Why Include a Background Video to Blog Posts?

why wordpress background videoAn image is considered to be a thousand words, but the video is a thousand images. This highlights the importance of a video on your WordPress posts. The most important thing about a video on your posts is the effect that it has on your current and new blog members and subscribers.

The video can call them from far and hold their attention to the end. Chances of having comeback readers are very high. It is thus a way to increase blog following and subscriptions. Also, not only can you get a high quantity of subscribers and blog comments, but also quality members among the internet readers with the background video.

Besides, the background video in WordPress site is visible to IOS device users, meaning that you capture the attention of readers both on PC and mobile.

How to Add a Background Video?

It is not possible to use CSS and paste URL of the video to have it running on the background. To set a video for background, you are required to ensuring that your video is wrapped in a div.

Next, position the div on the left-hand top corner of the viewport, and then adjust its size and its index to ensure that it remains underneath your post. Use JavaScript to re-adjust the size further to fill the entire screen. Ensure the video has“Click to Play” functionality for mobile device users.

It might seem a complex process, but it is all worth the while. You can note the change in the behavior of your readers and the growth of your subscription list.

Add a Video on WordPress Background using Plugin

The above process may not be friendly to many people. In fact, there is an easier way to add a video to your WordPress background without much struggle. This is through a plugin. Though WordPress does not have a pre-installed plugin to allow you use video backgrounds, you can use a third party plugin to do this.

The GitHub Custom plugin allows you to use video background with ease. You need to download the plugin, install and activate to start enjoying WordPress background video. The plugin uses a shortcode of bgvideo that is added to the blog post to automatically generate a background video.

github custom plugin

What Attributes Does The Shortcode Take?

The shortcode takes size attributes for the height and width of the video. It also considers three video versions that are mp4, Ogg and WebM video versions. Besides, the autoplay and loop are also considered. This means that the video loads as soon as the page has fully loaded and plays continuously if not set otherwise.

The video can also have the audio muted or playing and can be fixed where text scrolls on it. These are attributes of the shortcode that should be set right.

When you need to publish your content, click on Add Media link on the screen and select insert video. Move to text mode and change the video shortcode to bgvideo.

insert media

You now need to select the video and an image to make it easy for generating the shortcode. After that, the shortcode can simply turn to the background video for your post.

Finalize the Process

You may note that in some cases, the video is playing as background but cannot be seen due to the blog background that you have used. When your video remains hidden, it fails to have the desired effect, being unable to attract any reader to your blog. To ensure that the video is seen well, you need to remove the background and any other thing that might block the video. You can easily do this by using a CSS custom plugin.

It takes the same process to get a WordPress background video on a mobile device, mostly IOS devices. It is however advisable for you to downloads the WordPress mobile app to make the process easy. Most people who have tried this once can discover the magic of using a background video for content online on any viewing devices.


Lucy has been a very experienced SEOer, technical writer, web developer, c# developer since 2002. Now she owns a startup in San Francisco, CA, focusing on running a couple of blogs to share knowledge and experience with global readers and deliver exceptional results to global sponsors by leveraging the power of Internet.


Want to Learn More About WordPress?

Get Our Free Themes, Plugins, Support, SEO Tips, and Other Tutorials!

Email *