Set Up A YouTube Video As A Website Background

Brandon Mack September 23, 2015 0 Comments

First Attempt

We needed to setup a small video file, looping as the background on Saskatoon musician, Jordan Cook’s website as a teaser of what’s to come with his band Reignwolf. Creating the video was fairly simple, we grabbed some static video files with licensing that allowed us to use them, a color bar image that was free to use, and the clips provided by Jordan. We used iMovie to edit them together and compress the file into a mp4 video that was as small as we could get it so it would load quick on the web.

< style>
video#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(picture-background-while-video-loads.jpg) no-repeat;
    background-size: cover;
}
< /style>

< !--[if lt IE 9]>< script>document.createElement(‘video’);< ![endif]-->
< video autoplay loop poster="picture-background-while-video-loads.jpg” id=”bgvid”>
< source type="video/mp4" src="video.mp4“>
< /video>

All of the portions in italicized dark red you will need to replace with your pictures, videos, etc.

This way worked fine… kind of. It loaded fast most of the time, but had moments of lag. Every now and then when the website was accessed, it would take forever to get going. In these moments, fans that were accessing the website thought it was broken because people are impatient. Also, it is the almighty murderer of bandwidth. So, we needed a better solution. Our original idea was YouTube, so we decided to head back in that direction.

Second Attempt

We came across a jQuery plugin by the name of Tubular. Pretty much exactly what we need!

< !--[if lt IE 9]>< script>document.createElement(‘video’);< ![endif]-->
< video id="bgvid">< /video>

< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">< /script>
< script src="jquery.tubular.1.0.js">< /script>
< script>
$(document).ready(function (){
var options = { videoId: ‘youtube_video_id‘, repeat: true };
$(‘#bgvid’).tubular(options);
});
< /script>

All of the portions in italicized dark red you will need to replace with your pictures, videos, youtube video ID, etc.

The results ended up looking something like this:

Reignwolf Video Background Results

The following are the options and defaults for Tubular.

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

For any other information on the plugin, check out the plugin source below.

Good luck!

Source: seanmccambridge.com/tubular

Blog

Blog