"

From 2013.igem.org

/**

* @preserve Copyright 2011 Syd Lawrence ( www.sydlawrence.com ).
* Version: 0.2
*
* Licensed under MIT and GPLv2.
*
* Usage: $('body').videoBG(options);
*
*/

(function( $ ){

$.fn.videoBG = function( selector, options ) {

var options = {}; if (typeof selector == "object") { options = $.extend({}, $.fn.videoBG.defaults, selector); } else if (!selector) { options = $.fn.videoBG.defaults; } else { return $(selector).videoBG(options); }

var container = $(this);

// check if elements available otherwise it will cause issues if (!container.length) return;

// container to be at least relative if (container.css('position') == 'static' || !container.css('position')) container.css('position','relative');

// we need a width if (options.width == 0) options.width = container.width();

// we need a height if (options.height == 0) options.height = container.height();

// get the wrapper var wrap = $.fn.videoBG.wrapper(); wrap.height(options.height) .width(options.width);

// if is a text replacement if (options.textReplacement) {

// force sizes options.scale = true;

// set sizes and forcing text out container.width(options.width) .height(options.height) .css('text-indent','-9999px'); } else {

// set the wrapper above the video wrap.css('z-index',options.zIndex+1); }

// move the contents into the wrapper wrap.html(container.clone(true));

// get the video var video = $.fn.videoBG.video(options);

// if we are forcing width / height if (options.scale) {

// overlay wrapper wrap.height(options.height) .width(options.width);

// video video.height(options.height) .width(options.width); }

// add it all to the container container.html(wrap); container.append(video);

return video.find("video")[0]; }

// set to fullscreen $.fn.videoBG.setFullscreen = function($el) { var windowWidth = $(window).width(), windowHeight = $(window).height();

$el.css('min-height',0).css('min-width',0); $el.parent().width(windowWidth).height(windowHeight); // if by width if (windowWidth / windowHeight > $el.aspectRatio) { $el.width(windowWidth).height('auto'); // shift the element up var height = $el.height(); var shift = (height - windowHeight) / 2; if (shift < 0) shift = 0; $el.css("top",-shift); } else { $el.width('auto').height(windowHeight); // shift the element left var width = $el.width(); var shift = (width - windowWidth) / 2; if (shift < 0) shift = 0; $el.css("left",-shift);

// this is a hack mainly due to the iphone if (shift === 0) { var t = setTimeout(function() { $.fn.videoBG.setFullscreen($el); },500); } }

$('body > .videoBG_wrapper').width(windowWidth).height(windowHeight);

}

// get the formatted video element $.fn.videoBG.video = function(options) {

$('html, body').scrollTop(-1);

// video container var $div = $('<div/>'); $div.addClass('videoBG') .css('position',options.position) .css('z-index',options.zIndex) .css('top',0) .css('left',0) .css('height',options.height) .css('width',options.width) .css('opacity',options.opacity) .css('overflow','hidden');

// video element var $video = $('<video/>'); $video.css('position','absolute') .css('z-index',options.zIndex) .attr('poster',options.poster) .css('top',0) .css('left',0) .css('min-width','100%') .css('min-height','100%');

if (options.autoplay) { $video.attr('autoplay',options.autoplay); }

// if fullscreen if (options.fullscreen) { $video.bind('canplay',function() { // set the aspect ratio $video.aspectRatio = $video.width() / $video.height(); $.fn.videoBG.setFullscreen($video); })

// listen out for screenresize var resizeTimeout; $(window).resize(function() { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(function() { $.fn.videoBG.setFullscreen($video); },100); }); $.fn.videoBG.setFullscreen($video); }

// video standard element var v = $video[0];

// if meant to loop if (options.loop) { loops_left = options.loop;

// cant use the loop attribute as firefox doesnt support it $video.bind('ended', function(){

// if we have some loops to throw if (loops_left) // replay that bad boy v.play();

// if not forever if (loops_left !== true) // one less loop loops_left--;

 			});

}

// when can play, play $video.bind('canplay', function(){

if (options.autoplay) // replay that bad boy v.play();

});

// if supports video if ($.fn.videoBG.supportsVideo()) {

// supports webm if ($.fn.videoBG.supportType('webm')){

// play webm $video.attr('src',options.webm); } // supports mp4 else if ($.fn.videoBG.supportType('mp4')) {

// play mp4 $video.attr('src',options.mp4);

// $video.html('<source src="'.options.mp4.'" />');

} // throw ogv at it then else {

// play ogv $video.attr('src',options.ogv); }

}

// image for those that dont support the video var $img = $('<img/>'); $img.attr('src',options.poster) .css('position','absolute') .css('z-index',options.zIndex) .css('top',0) .css('left',0) .css('min-width','100%') .css('min-height','100%');

// add the image to the video // if suuports video if ($.fn.videoBG.supportsVideo()) { // add the video to the wrapper $div.html($video); }

// nope - whoa old skool else {

// add the image instead $div.html($img); }

// if text replacement if (options.textReplacement) {

// force the heights and widths $div.css('min-height',1).css('min-width',1); $video.css('min-height',1).css('min-width',1); $img.css('min-height',1).css('min-width',1);

$div.height(options.height).width(options.width); $video.height(options.height).width(options.width); $img.height(options.height).width(options.width); }

if ($.fn.videoBG.supportsVideo()) { v.play(); } return $div; }

// check if suuports video $.fn.videoBG.supportsVideo = function() { return (document.createElement('video').canPlayType); }

// check which type is supported $.fn.videoBG.supportType = function(str) {

// if not at all supported if (!$.fn.videoBG.supportsVideo()) return false;

// create video var v = document.createElement('video');

// check which? switch (str) { case 'webm' : return (v.canPlayType('video/webm; codecs="vp8, vorbis"')); break; case 'mp4' : return (v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')); break; case 'ogv' : return (v.canPlayType('video/ogg; codecs="theora, vorbis"')); break; } // nope return false; }

// get the overlay wrapper $.fn.videoBG.wrapper = function() { var $wrap = $('<div/>'); $wrap.addClass('videoBG_wrapper') .css('position','absolute') .css('top',0) .css('left',0); return $wrap; }

// these are the defaults $.fn.videoBG.defaults = { mp4:, ogv:, webm:, poster:, autoplay:true, loop:true, scale:false, position:"absolute", opacity:1, textReplacement:false, zIndex:0, width:0, height:0, fullscreen:false, imgFallback:true }

})( jQuery );