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.
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.
We came across a jQuery plugin by the name of Tubular. Pretty much exactly what we need!
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:
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.