A web design trend that is taking off with more and more sites in recent times is the background video trend, usually observed on the home page of a site. As sites become more media-heavy and interactive this is a trend that rises to popularity, especially with digital agencies, interior designers and filmmakers, but can be seen on every site that wants to achieve the ‘wow’ effect on the landing user!
But this ‘wow’ effect often comes with the price of affecting the speed of a site. In WordPress we can see how easy it is to put a video on our site and in this article we will talk about what are the important things we should know about background videos as well as how you can set one on your site.
To embed or not to embed - said Hamlet - the web designer.
Embedding vs Uploading
Let’s first start off with the main differences between one and the other. When we are referring to uploading a video to a site - we are referring to a video file, hosted on the same hosting space as our site, just like the rest of the media files of the site. However, when we are referring to embedding a video we are referring to a video that is hosted externally (for instance YouTube) and the site is simply ‘linking’ to that video.
While the location of the video file is the main difference between the two types of site video management, let’s talk about the pros and cons of each of the two methods
Embedding a video
When you are embedding your video file to YouTube, Vimeo or any platform of the same kind you are benefiting from the thousands of algorithms written especially for video optimization and compression allowing for faster processing and loading of the video. You are also benefiting from having your brand on another platform and generating more external traffic to your site this way. Another plus is also the fact that when embedded the video will not affect your site speed as much as a directly uploaded video as it is an external resource.
The cons for this type of video management are usually within the quality of the video, as in order to load faster for certain users - YouTube may show a lower quality version of your video- as compression is automatic.
Uploading a video
When uploading a video directly to your website - you can upload it with the best possible quality and size as you would like.
However, the main con of this video management is that the larger the file size is - the slower your site will load. As the browser will try to fully load that 100mb file (or more) and you will have a page loading for 10 seconds or even more. And the slowness will also affect your SEO, as bad site performance is a major issue for SEO.
How to put a video background to your homepage
Now that we know the main difference between embedding and uploading, we can agree to an extent that video embedding is the best way to go because of speed, optimization, and overall user experience, however if you do have a very optimized and tiny video file - you can use this instead if there is a reason stopping you of posting it to platforms such as YouTube.
The way of the plugin
The easiest way to get the ‘wow’ factor and put a video background on a homepage is using a plugin.
mb.YTPlayer for background videos - This very simple and user-friendly plugin will allow you to put a video background on almost every site with just a few clicks. Just install the plugin, go to its settings and place the YouTube video link and you are done. It is compatible with most themes and it is optimized for mobile devices since the recent update of the plugin. The cons here are that it is limited to YouTube only, so if you want to embed a video from Vimeo you wouldn’t be able to.
Video Background - This plugin allows all sort of videos to be embedded including Vimeo and other external sources, it is quite user-friendly as well. It has wpBakery and siteOrigin builders integration as well. The cons here are that compatibility wise there are some themes not supporting the plugin.
When the plugin does not work for you
If you are using a custom theme, child theme or any specific theme not supporting video plugins neither having the integrated video background option (as there are some amazing themes having this feature) you can manually add this function to your page template.
Please note that changes to a template file should be done only in a child theme in order for those changes not to be overwritten by the theme update.
There are multiple ways to approach this, if your child theme already has a homepage template file or is using for instance the full-width template you can either edit it directly or copy it, rename it to something like home-page-new.php (if you are going for this approach do not forget to edit the comment right under the <?php tag to the new template name ( for instance - /* * Template Name: New Home */ - as you will be able to see it in WordPress by that name).
The easiest way would be to put a div class under the <?php body_class(); with your custom video and later on to add the CSS that will modify the styling. For instance:
<!--?php body_class();<div class="vimeo-wrapper"--> <video autoplay="" loop="" muted="" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""> <source src="http://video-link-goes-here" type="video/mp4"> </video>?>
And then the CSS would be
.vimeo-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden;Of course, depending on your theme and how it is set you might want to take a different approach, there are multiple of ways to manually put a video background and millions of styling options for that video.
Still having issues? We can help. Have a look at our pricing here.
