Using a video as the background of the homepage or landing pages is an ascending web design trend. Many businesses have already adopted this as a design element because videos are more eye-catching than images, more content rich, and can leave a deeper impression to visitors.
If you sell products or services on your website, adding a video background to the landing pages is a great way to diversify your business for attracting and impressing the potential customers. Customized application software might also be useful to your organization.
However, due to the large file size of videos, which can slow down your site to a large extent, video backgrounds are not suitable for everyone. In the case that you run a traditional blog or a small personal website, videos do no good especially when your site is on a shared server. Speed is much more important, after all.
If you have decided to try a video background on your WordPress site, follow the tutorial below.
Find Video Resources for Website Background
The best practice is to create your own videos. This method is complicated, costly and time-consuming, but it is highly recommended if you run your own business. You can easily tailor the videos for your products. However, for the sake of performance, you'd better find an external service like Vimeo Pro to host your videos instead of uploading them to the same server as your site.
If you do not want to make a video, there are still some other choices, including:
Using the free videos from resources like YouTube and Vimeo.
Purchasing videos from stock video libraries such as iStock and ShutterStock. Depending on the quality, the cost ranges from several to dozens of USDs.
Most beginners would choose the former way because no cost is needed, and pulling videos from YouTube and Vimeo is easy. However, there are some drawbacks of doing so. The source video may be removed by the provider one day, and you may display ads or the related videos unintentionally.
Here is our suggestion. You can still start by using a free video from YouTube, but after a while when your site gains steady traffic, you should at least buy a cheap but reliable video.
Add a Video Background to Your WordPress Site
Now that you have got the video prepared, you can start learning to add it to your site. This can be done in three ways, including:
Encoding the video with HTML 5, JavaScript and CSS. This gives you full control over the display but it requires a high level of technical skills.
Using a premium theme which supports video background, such as the Divi theme from Elegant Themes.
Using a plugin. This is the most widely adopted method due to the ease of use. Also, this method is applicable to all kinds of WordPress themes.
For this post, we will take a free plugin named mb.YTPlayer for background videos as the example to explain how to use a YouTube video as the background.
First of all, you need to install the plugin on your site. After activating it, navigate to Settings>mb.YTPlayer. Make sure the option for activating background video is checked.
On the settings page, you can see more than 10 options you can use to add and control the background video. Below are the necessary settings you have to deal with.
YouTube video URL: Copy the URL of the YouTube video you will use and paste it here. If you want to add multiple videos, use a comma to separate the URLs, and the plugin will randomly display one when your homepage is visited.
The page where the background video will be displayed on: You can select the static homepage, blog index homepage or both based on your own requirement.
Opacity: The default value is "1", and you can lower the value if you want the video to be more transparent.
Quality: You can make your own selection based on the file size of your video. If you are not certain which to use, keep the quality to be "default".
Aspect Ratio: You can select any value and make changes later if there is a problem in displaying the video.
Start and stop time: If you only want a part of the video to be displayed, you can set the start and stop time in seconds.
Mute the video: You'd better not enable the autoplay of the audio because it would be annoying for most visitors.
Track video views: Once you turn this option on, you can track the views in Google Analytics.
For other options, you can just leave them for future adjustment. Once you are done, save the settings and visit the homepage of your site to check the display of the video background.
The configurations explained above are for adding a video background to the homepage only. However, the plugin also comes with a feature that allows you to use video backgrounds for any post or page. You can do so by clicking on the YTPlayer button in the visual editor. The settings are the same simple as adding a video background to the homepage. And a shortcode will be inserted into your post/page automatically.
If you want a more detailed tutorial about this task, check this informative post.
Other Plugin Choices
As we have mentioned above, the mb.YTPlayer plugin works only for using the videos on YouTube. So if you host videos somewhere else, you should use another plugin. Below are some good choices.
Easy Video Background WP
This is a paid plugin that is easy-to-use and rich-featured. You can use it to add a full-screen video background or just place the video inside a div. The plugin is compatible with all major web browsers, and in the unlikely event that the visitor's browser does not support the video tag, it generates a flash fallback.
Image & Video FullScreen Background
This is also a premium plugin. It comes with a responsive design and is fully compatible with the major browsers and mobile operating systems. You can add animated text, and insert the videos at YouTube and Vimeo. It is a good option for setting an image or video as full-screen background.
bgvideo
This plugin is free to use, but it requires a little knowledge about shortcode. You can use the built-in "bgvideo" shortcode to add videos to any WordPress post or page, and control the display of the videos by adding parameters like width, height, autoplay, muted, loop, etc. The plugin can play a video in the MP4, WebM and OGG format so that it can run on various devices.
Final Considerations about Video Backgrounds
No matter you are planning to add a video background manually with code or use a plugin, you should follow the suggestions below to ensure an optimal browsing experience for all visitors.
Enable autoplay for the background video, so that it can play automatically as soon as other elements of the webpage are loaded successfully.
Do not play the audio of the video automatically. If you need the audio, offer visitors a button to turn it on.
When looping the video, choose the proper start and stop time to make things natural.
Be sure to add a fallback image or flash to the video, so even if there is a compatibility issue, the backup plan works, which prevents your site design from being broken.
Do not display the video background on smartphones and tablets as it can be more than slow to load the video. Instead, use a well-designed image or flash.