Adding Background Video is a great way to increase the beauty of your website. Also, it bolsters page views and user revisits. It is also used to capture users attention and increase the stay time on your website.
Even though having a background video looks mesmerizing, sometimes it can lead to user dissatisfaction if the video is not handled or set properly. A high-quality video might look catchy however, it can also increase the load time of your website pages. Thus, as a convention/ best practice it is always better to have a page size under 4 MB if you are using a background video on that page else it should be under 2 MB at any cost. Otherwise, the chances are high that you will lose visitors.
Although there are many premium plugins available, very less are available as free. With that said, let us have a quick look at a free plugin which is the best I came across. The plugin is called Video Background which we would discuss today. It is the most efficient and lightweight free plugin. However, they also have some premium/paid features too. The background video can be added to any element. However, mostly it is added as a full-width or as a box element. Here we would discuss the two main ways to add it to your website.
Adding Background Video - Full Width using the Video Background Plugin
Step 1: To start off, first, install the Video Background plugin and activate it. If you are not sure how to install a plugin then please check the guide on installing a plugin in WordPress. Now that you are done activating the plugin, locate the page/post on your WordPress admin panel where you want to add a background video. ›› Click Edit.
Step 2: Next, go to your page builder and add a row. In my case, I am using page builder by SiteOrigin. After that, go to the settings of that row by clicking on the wrench icon ().
Step 3: Enter a class for your row. In case of page builder by SiteOrigin, you can find the same under Attributes tab on the right-hand side. ›› Enter a name under Row Class and under CSS Styles enter
height:400px; .The value of height can be altered as per needs, it is the height of the element. Here the video will be inside the row element so the height will determine the video height.
Step 4: After you are done with the Attribute tab, scroll down and click on the Layout tab. Here, under Row Layout select Full Width. Finally, click on Done.
Step 5: Next, if you have installed and activated the Video Background plugin correctly, you should see a meta box titled Video Background below the content editor of your current page. Expand the meta box by clicking on it.
Step 6: Enter the name of the Row class that we had set previously under the Container. ›› Upload your mp4 and WebM formats of your video under the link to mp4 and link to WebM respectively. Also, upload a fallback image since mobiles mostly do not support background videos(due to performance issues the background video is not made available in Mobiles). ›› Next you can go ahead and configure the advanced settings like adding an Overlay(overlays add a layer of color on your videos so that your text is visible properly), turning on/off audio, turning on/off a loop.
Note: It is highly recommended to keep your videos under 4mb for optimal website performances. And, always compress your videos before uploading them. You can use Video Smaller or Clipchamp to compress your videos online and use Youtube to edit and merge your videos online.
The plugin also offers a way to display your youtube video, however, it is only available to premium users.
Lastly, click on Publish/Update.
Adding Background Video - Block-Level using the Video Background Plugin
Step 1: Repeat up to Step 2 from above.
Step 2: Click on Set Row layout and set it to 2 or any number you want. This number determines the number of columns you want to have in your particular row. ›› Click Done.
Step 3: Now, select any one of the column/cells and click on Add Widget. ›› Click on Visual Editor. ›› Hover over the visual editor that you added and click Edit.
Step 4: Locate the Attributes tab on the right-hand side. ›› Enter a name under Row Class and under CSS Styles enter
height:400px; .The value of height can be altered as per needs, it is the height of the element. Here the video will be inside the row element so the height will determine the video height. ›› Click Done.
Step 5: Repeat Steps 5 & 6 of "Adding Background Video - Full-Width using the Video Background Plugin".
That's it, We are done! I hope you learned something. If you did please share it. Also, do not forget to comment below your questions if you have any. Have a great day.