Easy Guide for Adding Video Background to Your Website

Playing video in the Background can be a cool way to grab the attention of the visitors. Adding Video background to your website can make your website look artistic and stand out from the crowd. People will stay in your website longer and they are likely to subscribe to your website and even bye your product and services. If you are trying to add video background to your website then follow this guide. In this article we will present you with easy ways for adding video background to your website and give you links to various handy tools resources that you will need i the process.

Easy Guide for Adding Video Background to Your Website

Things to remember while adding the video

  • Make sure your video has a purpose. The video should complement what your homepage is trying to achieve.
  • Video should not affect the readability of the text in your website.
  • It is much better to use a short video that loops than using a longer video.
  • Mute your video and do not show video controls.

Step 1: Choose your source

First find the video that you want to use as the background of your website. The video must give a meaning to the content and match the type of your website. The straight forward way is to upload the video in your hosting server and then link the video in your website from your own server. This will occupy some space in your server but it will be faster and free from unwanted problems.

If your source is websites like YouTube, DailyMotion and Vimeo then you can directly embed the videos from those sites. This will save some space in your server and it can be a good option if you have limited space. Although YouTube is extremely popular we don’t recommend it due to the appearance of unwanted aids. Stock videos can be another good source of videos. Dissolve and iStock are some places where you can find premium videos. Here are the list of 5 places to find the free stock background videos.

Adding video background to your website

Step 2: Edit Your Videos to the Proper Size, Length and Format

Large file size can seriously impact the site load speed. Keep the length of your video as short as possible. Reduce the video size by encoding your video to a lower bit-rates. Not only your video should look good, it should also play smoothly. Make sure that even the visitors with slower internet connections can play your videos smoothly.

Step 3: Choose Your Video Player

To play the video in your website the most important thing that you need is the video player. You need a player that is responsive and fits well in your theme.

Using code to create the video player

This is the basic example of HTML5 code for creating a video player in your website. You need to have the basic idea of HTML and CSS to implement and customize the code according to your requirement. In the code replace the ‘src’ value with URL of your video.

<video id="my-video" class="video" autoplay="autoplay" loop="loop" muted="">
    <source src="media/demo.mp4" type="video/mp4" />
    <source src="media/demo.ogv" type="video/ogg" />
    <source src="media/demo.webm" type="video/webm" />
</video>

<div id="page-text">
    <h1>Background Video Sample</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, 
       eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam.
       Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at 
    </p>
</div>

Now the minimum CSS that you will need to set the video as background is given below.

#my-video{
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
}

#page-text{
    text-align:center;
    padding:200px;
    align:none;
    color:#fff;
}

Handling background videos on mobile

Playing background videos in mobile view can invite many challenges. So it is better to switch off the video in mobile view and replace it with an image. This can be achieved using simple media query. Here is the sample code for replacing the video with image. Don’t forget to replace the content of the ‘url‘ below with the URL of your image.

@media screen and (max-device-width: 800px) {
    html {
        background: url(image.gif) #000 no-repeat center center fixed;
    }
    #my-video {
        display: none;
    }
}

Here’s a few tools that can help you translate a background video to a GIF image:

Also Read:   How to Hide WordPress Admin Login Page

Adding video background to your website

Plugins

The task of adding video background to your website becomes relatively simple with the help of a plugin. There are many free as well as premium plugins that will make the task of adding video background to your website faster and easier. If you have decided to use a video background plugin then you need to test it first. The plugin should be compatible with your current WordPress theme. Otherwise the plugin may conflict with the functionality of your theme. These are the list of plugins available for WordPress

These are the HTML5 addons that you can use on any site.

These are the jQuery plugins that you can try.

Adding video background to your website

You can also be wise and use a theme that has built in video background feature in it. Some themes support the video background feature by default. You can simply activate the feature if your theme has video background feature. We hope the article helped you with adding video background to your website. You can read our other article on “Best Premium and Free Magazine News WordPress Themes of 2017“.

The following two tabs change content below.
Kantiman Bajracharya

Kantiman Bajracharya

Kantiman Bajracharya is a freelance web developer. He is a computer geek who has a Bachelor’s degree in Computer Engineering. He has earned lots of satisfied customers while working for numerous successful projects. He is also a WordPress theme creator and web article writer. On free time he likes reading philosophy books, traveling and playing chess.

Share This Post