Making video as a website background has become a trend lately, many web designers have implemented it, and it is proven that the results are quite good and make websites look attractive.

Usually musician websites, movie promotion websites or personal websites related to music and movies are suitable for using this trick to support the appearance of their website.

Movie background
Image by Salon.com

In this article, tutorial-webdesign.com will give an example of its use, namely putting a video as a website background, here the video used is a YouTube video so it doesn’t take up hosting bandwidth.

Related previous articles

Play video on website with html5
Upload video files with codeigniter
Start With Equipment.
As usual, before starting we prepare the equipment that we will use.

Video from Youtube (Dear God by Avenged Sevenfold).
Google Webfont (Patrick Hand SC).
Jquery Tubular.
Creating HTML Structure.
After we have enough equipment, it’s time for us to create the HTML structure, actually to make a youtube video as a background we only need a div with ID #wrapper

Head

In the head and /head sections, we insert google web fonts, jquery and Jquery Tubular.
While in the body, we create the following structure.

Body

Make Youtube Video As Website Backgroundwebdesign

Video: Dear God by Avenged Sevenfold | back to tutorial

CSS
For the appearance of the website, you can insert css, please adjust this css according to your needs.

in this demo we are just trying to apply the video as a background and place other elements on it.

{ padding: 0;margins: 0; } a{ text-decoration: none; color: orange; } body{ font-family: ‘Patrick Hand SC’, cursive; overflow: hidden; / optional */
}

wrapper{

background: transparent url(img/pattern.png) repeat top left;
}
header{
padding: 10px 20px;
colors: #f4f4f4;
}
headers h2{
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 1px #fff;
}
header small{
font-size: 14px;
}
Javascript
To run a tubular jquery so that the video is played in the #wrapper div ID, we write the following javascript (jquery) script.
Place the following script just above /head.

$().ready(function() {
$(‘#wrapper’).tubular({videoId: ‘mzX0rhF8buo’, mute: false, ratio: 4/3}); // where idOfYourVideo is the YouTube ID.
});
To determine the youtube video you want to play, take the ID of the youtube video, for example this Avenged Sevenfold video: https://www.youtube.com/watch?v=mzX0rhF8buo
take the tablished ID and put it in the videoID section in the above javascript.

Other options that we can use for video settings with Jquery Tubular can be seen below.

ratio: 16/9 // usually either 4/3 or 16/9 — tweak as needed
videoId: ‘ZCAnLxRvNNc’ // toy robot in space is a good default, no?
mute: true
repeat: true
width: $(window).width() // no need to override
wrapperZIndex: 99
playButtonClass: ‘tubular-play’
pauseButtonClass: ‘tubular-pause’
muteButtonClass: ‘tubular-mute’
volumeUpClass: ‘tubular-volume-up’
volumeDownClass: ‘tubular-volume-down’
increaseVolumeBy: 10 // increment value; volume range is 1-100
start: 0 // starting position in seconds
Results

If the steps above are followed correctly then the video will appear like the following demo, and if you want to try it yourself you can download the script.

To run this script must be connected to the Internet because the video is on Youtube.