One of the most popular web design trends in recent years is to play the video in your website background. By doing so, you can easily make a strong impression for your visitors and grab their attention in the first sight after entering your webpages. After all, as compared with the white-colored background or the simple image background, a dynamic video is much more animated and attractive.
However, we have to mention that the video background is not suitable for all the websites with any kind. In the following, we have summarized some situations when you can and cannot add such a vivid background, along with the detailed steps of how to create WordPress video background with ease.
When to Create the WordPress Video Background
Before starting the creation of video background, you firstly need to make sure that whether it is a good choice for your site. For instance, if your site is a small blog that is hosted by a cheap shared web hosting, you’d better forgo this choice for the loading of video can slow down your whole performance to a large degree. In addition, if you do not want to distract your visitors from the central content you want them to see, the colorful and animated video background is not suitable for you. Even, if you set up the news site, online magazines, institutional platforms or any other site coming with the serious topic, we do not recommend you to create this kind of background.
As for when to consider creating a video background, we also have concluded some typical examples.
- If your site is about music and band, this vivid background can draw people’s mind quickly.
- If your site is about creativity and some high-tech items, you can create the video background to achieve the modern and fresh sense.
- Sometimes, loading a video in the background can lead to a strong impact on your product styles and brand identity.
How to Create the WordPress Video Background
If you make sure that a video background is a great option to better optimize your website, now, you can check the below steps for figure out how to achieve your goal.
Step 1 – Pick Your Video Source
To begin with, you need to find a proper video to be displayed on your website background. You can create one on your own or download a free one from some source sites like Vimeo and YouTube. Even, there are a lot of great platforms that offer the stock videos for free, such as iStock, Video Blocks, Dissolve and Shutter Stock.
Step 2 – Optimize Your Video with the Proper Duration and Size
In fact, this is a critical step for the proper display of your video background, but many webmasters simply forget or ignore it.
- Duration – It is possible that your downloaded stock video is long to display. In this case, you need to cut it down to no more than 10 seconds. After all, the shorter video can be loaded more easily and can hardly bore your readers.
- Size – A video of a large size takes time and bandwidth for loading. In this case, for the sake of the overall running for your site, you’d better optimize it for a smaller size.
Step 3 – Add the Video to Your Background
Now, as the video source is ready, you can add it to your website. Here, we strongly recommend you to use the Video Background plugin, which is a jQuery based plugin that allows you to add the video background to any element and webpage of your site.
Once you have installed and activated this special tool on your WordPress admin, there is no need for you to do any configuration. You can directly open the editing page of your preferred webpage that you are looking to create the video background. Generally, it is your homepage.
From the bottom of the editing screen, there is a newly added meta section named as Video Background. After finishing the required field, you can show your video background promptly.
- Container – This part allows you to determine the exact element for showing the video. As you are looking for a full-width and full-height video background, you need to add the “body” option into the field. If you want the special background to be showcased in the header section only, you need to enter the “.header” choice.
- Link to MP4 – For the proper display on IE browser and Safari, you need to convert your video into the MP4 format and upload it to the Media Library of your WordPress site. Then, enter the full link into the field.
- Link to WEBM – To ensure the showcase on Opera, Firefox and Chrome browsers, you would better transform the video to the .webm file as well and upload it to your site. Also, do not forget to enter the right file link.
- Link to Fallback Image – It is possible that your readers may use some devices that do not support the video background, such as the mobile phone. In this case, you need to offer a fallback image as the alternative background.
In addition to these 4 basic settings, you can also set up another 3 advanced options.
Firstly, if your video background comes with the same color as your textual content, you can enable the overlay feature for the clear display.
In addition, if you only want to display the video for one time when people checking your webpage, you can turn off the loop function. Once the video is finished for playing, the last frame will be displayed.
Lastly, if your video also has the sound and music, you can choose to play the audio or not based on your preference.
That’s it. Now, you can check the front-end for the final result.