One of the most popular web design trends of 2015 is using browser sized video background for your website. There are high chances that many of you are using a single static image as the background of your website. But if you switch to using self-playing video clips or animations as the background of your webpages, your users will surely get a richer experience on your website.
In this blog post we help you know how you can easily build video background for your websites. One good thing about video backgrounds is that unlike JavaScript animated backgrounds it runs very smoothly. Perhaps this is a major reason why companies like Bing, Adidas and Powerhouse use video backgrounds to communicate their message in a creative manner.
Usually video backgrounds are made using HTML5 video tag along with CSS. In this blog post we bring ways in which you can use YouTube videos as the background for your website. You can do this by using ready-to-use jQuery plugins, BigVideo.js or Tubular. These tools enable you to use any video or a series of videos as background for your web page.
Another very simple way of doing this is by using HTML and CSS tags (No JavaScript) in order to place any YouTube video on your web page background.
Let us begin with the Set Up needed to do this. First and foremost you must be clear on what you want the visitors on your website to see on the webpage. Once you have decided what is it that you want the visitors to see, then you need to keep in mind that your video should be:
- Short and Sweet (something between 15-30 seconds)
- As far as possible the audio has to be muted, or always choose sounds which are not annoying and drive the traffic away
- The text and headers which you use in Videos need to be clear, concise and readable
- The video must be set to Auto-play mode
Now you need to mark up three sections in HTML as
- Big-background
- About – section
- Small- background- section
The Big-background section will have the video background while the rest of the two sections will form the main content of the website. Once the sections are divided, you need to add markup for the Big-background section by using the jQuery.mb.YTPlayer plugin. When you do this, make it a point that you use the actual video ID of the YouTube video that you would like to use in the background. Also you can use YouTube’s IFRAME tags to embed the video so that it occupies the entire page of your website. Along with this you need to set the z-index to negative so that the YouTube video layer will appear few levels below the main content of the page.
One major drawback is that the background video will not work on mobile devices and the video cannot be muted without using JavaScript. The easiest solution to this problem is to use a media query which switches off the video completely on smaller screens by using the placeholder image in the background.
In this way you can use YouTube videos as the background of your website. If used in the effective manner, videos are one of the best ways to give an outstanding user-experience to your audience. Thus make use of all the features judiciously in order to build a responsive web design.
