* @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 );