Example : jQuery - Background Video

├── bower.json ├── example ├── example.html ├── js │ ├── background-video.js │ ├── flash-fallback.js │ └── modernizr.js ├── media │ ├── cloud.jpg │ ├── cloud.mp4 │ ├── cloud.ogg │ └── cloud.webm └── with-flash-and-image-fallbacks.html ├── jquery.backgroundvideo.js ├── jquery.backgroundvideo.min.js └── readme.md /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "background-video", 3 | "version": "1.0.0", 4 | "description": "HTML 5 video tags as background", 5 | "main": "jquery.backgroundvideo.js", 6 | "keywords": [ 7 | "jquery", 8 | "html5", 9 | "video" 10 | ], 11 | "ignore": [ 12 | "**/.*", 13 | "node_modules", 14 | "bower_components", 15 | "app/components", 16 | "test", 17 | "tests" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /example/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Example : jQuery - Background Video 5 | 6 | 13 | 14 | 15 | 16 | 17 | 18 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /example/js/background-video.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | var videobackground = new $.backgroundVideo('$(body)', { 3 | "width": 1280, 4 | "height": 720, 5 | "path": "media/", 6 | "filename": "cloud", 7 | "types": ["mp4","ogg","webm"] 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /example/js/flash-fallback.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | // Player options : http://code.google.com/intl/fr-FR/apis/youtube/player_parameters.html 3 | // Lets Flash from another domain call JavaScript 4 | var params = { 5 | allowScriptAccess: "always", 6 | wmode: "transparent", 7 | autoplay: 1, 8 | loop: 1 9 | }; 10 | // The element id of the Flash embed 11 | var atts = { id: "flash-fallback-video" }; 12 | // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/) 13 | swfobject.embedSWF("http://www.youtube.com/apiplayer?video_id=ylLzyHk54Z0&version=3&autoplay=1&loop=1&playlist=ylLzyHk54Z0", 14 | "flash-fallback", "100%", "100%", "9", null, null, params, atts); 15 | }); 16 | -------------------------------------------------------------------------------- /example/js/modernizr.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.5.2 (Custom Build) | MIT & BSD 2 | * Build: http://www.modernizr.com/download/#-backgroundsize-video-shiv-cssclasses-addtest-teststyles-testprop-testallprops-domprefixes-css_backgroundsizecover-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function y(a){j.cssText=a}function z(a,b){return y(prefixes.join(a+";")+(b||""))}function A(a,b){return typeof a===b}function B(a,b){return!!~(""+a).indexOf(b)}function C(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function D(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:A(f,"function")?f.bind(d||b):f}return!1}function E(a,b,c){var d=a.charAt(0).toUpperCase()+a.substr(1),e=(a+" "+n.join(d+" ")+d).split(" ");return A(b,"string")||A(b,"undefined")?C(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),D(e,b,c))}var d="2.5.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v=function(a,c,d,e){var f,i,j,k=b.createElement("div"),l=b.body,m=l?l:b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),k.appendChild(j);return f=["",""].join(""),k.id=h,m.innerHTML+=f,m.appendChild(k),l||g.appendChild(m),i=c(k,a),l?k.parentNode.removeChild(k):m.parentNode.removeChild(m),!!i},w={}.hasOwnProperty,x;!A(w,"undefined")&&!A(w.call,"undefined")?x=function(a,b){return w.call(a,b)}:x=function(a,b){return b in a&&A(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.backgroundsize=function(){return E("backgroundSize")},p.video=function(){var a=b.createElement("video"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),c.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,"")}catch(d){}return c};for(var F in p)x(p,F)&&(u=F.toLowerCase(),e[u]=p[F](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)x(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,g.className+=" "+(b?"":"no-")+a,e[a]=b}return e},y(""),i=k=null,function(a,b){function g(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function h(){var a=k.elements;return typeof a=="string"?a.split(" "):a}function i(a){function m(){var a=j.cloneNode(!1);return k.shivMethods?(i(a),a):a}function n(a){var b=(c[a]||(c[a]=e(a))).cloneNode(!1);return k.shivMethods&&!d.test(a)?j.appendChild(b):b}var b,c={},e=a.createElement,f=a.createDocumentFragment,g=h(),j=f(),l=g.length;while(l--)b=g[l],c[b]=e(b),j.createElement(b);a.createElement=n,a.createDocumentFragment=m}function j(a){var b;return a.documentShived?a:(k.shivCSS&&!e&&(b=!!g(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio{display:none}canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}mark{background:#FF0;color:#000}")),k.shivMethods&&!f&&(b=!i(a)),b&&(a.documentShived=b),a)}var c=a.html5||{},d=/^<|^(?:button|iframe|input|script|textarea)$/i,e,f;(function(){var c,d=b.createElement("a"),g=a.getComputedStyle,h=b.documentElement,i=b.body||(c=h.insertBefore(b.createElement("body"),h.firstChild));i.insertBefore(d,i.firstChild),d.hidden=!0,d.innerHTML="",e=(d.currentStyle||g(d,null)).display=="none",f=d.childNodes.length==1||function(){try{b.createElement("a")}catch(a){return!0}var c=b.createDocumentFragment();return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}(),i.removeChild(d),c&&h.removeChild(c)})();var k={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video".split(" "),shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:j};a.html5=k,j(b)}(this,b),e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return C([a])},e.testAllProps=E,e.testStyles=v,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return o.call(a)=="[object Function]"}function e(a){return typeof a=="string"}function f(){}function g(a){return!a||a=="loaded"||a=="complete"||a=="uninitialized"}function h(){var a=p.shift();q=1,a?a.t?m(function(){(a.t=="c"?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){a!="img"&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l={},o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};y[c]===1&&(r=1,y[c]=[],l=b.createElement(a)),a=="object"?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),a!="img"&&(r||y[c]===2?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i(b=="c"?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),p.length==1&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=!!b.attachEvent,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return o.call(a)=="[object Array]"},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f 2 | 3 | Example with flash and image fallback : jQuery - Background Video 4 | 5 | 6 | 7 | 8 | 37 |

38 | 39 | 94 | -------------------------------------------------------------------------------- /jquery.backgroundvideo.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery Background video plugin for jQuery 3 | * --- 4 | * Copyright 2011, Victor Coulon (http://victorcoulon.fr) 5 | * Released under the MIT, BSD, and GPL Licenses. 6 | * based on jQuery Plugin Boilerplate 1.3 7 | */ 8 | 9 | (function($) { 10 | 11 | $.backgroundVideo = function(el, options) { 12 | 13 | var defaults = { 14 | videoid: "video_background", 15 | autoplay: true, 16 | loop: true, 17 | preload: true 18 | } 19 | 20 | var plugin = this; 21 | 22 | plugin.settings = {} 23 | 24 | var init = function() { 25 | plugin.settings = $.extend({}, defaults, options); 26 | plugin.el = el; 27 | 28 | buildVideo(); 29 | } 30 | 31 | var buildVideo = function () { 32 | var html = '', 33 | preloadString = '', 34 | autoplayString = '', 35 | loopString = '', 36 | _preload = plugin.settings.preload, 37 | _autoplay = plugin.settings.autoplay, 38 | _loop = plugin.settings.loop; 39 | 40 | if (_preload) { 41 | preloadString = 'preload="auto"'; 42 | } else { 43 | preloadString = ''; 44 | } 45 | 46 | if (_autoplay) { 47 | autoplayString = 'autoplay="autoplay"'; 48 | } else { 49 | autoplayString = ''; 50 | } 51 | 52 | if (_loop) { 53 | loopString = 'loop="true"'; 54 | } else { 55 | loopString = ''; 56 | } 57 | 58 | html += '

'; 69 | plugin.el.html(html); 70 | plugin.videoEl = document.getElementById(plugin.settings.videoid); 71 | plugin.$videoEl = $(plugin.videoEl); 72 | plugin.$videoEl.fadeIn(2000); 73 | setProportion(); 74 | } 75 | 76 | var setProportion = function () { 77 | var proportion = getProportion(); 78 | plugin.$videoEl.width(proportion*plugin.settings.width); 79 | plugin.$videoEl.height(proportion*plugin.settings.height); 80 | 81 | if (typeof plugin.settings.align !== 'undefined') { 82 | centerVideo(); 83 | } 84 | } 85 | 86 | var getProportion = function () { 87 | var windowWidth = $(window).width(); 88 | var windowHeight = $(window).height(); 89 | var windowProportion = windowWidth / windowHeight; 90 | var origProportion = plugin.settings.width / plugin.settings.height; 91 | var proportion = windowHeight / plugin.settings.height; 92 | 93 | if (windowProportion >= origProportion) { 94 | proportion = windowWidth / plugin.settings.width; 95 | } 96 | 97 | return proportion; 98 | } 99 | 100 | var centerVideo = function() { 101 | var centerX = (($(window).width() >> 1) - (plugin.$videoEl.width() >> 1)) | 0; 102 | var centerY = (($(window).height() >> 1) - (plugin.$videoEl.height() >> 1)) | 0; 103 | 104 | if (plugin.settings.align == 'centerXY') { 105 | plugin.$videoEl.css({ 'left': centerX, 'top': centerY }); 106 | return; 107 | } 108 | 109 | if (plugin.settings.align == 'centerX') { 110 | plugin.$videoEl.css('left', centerX); 111 | return; 112 | } 113 | 114 | if (plugin.settings.align == 'centerY') { 115 | plugin.$videoEl.css('top', centerY); 116 | return; 117 | } 118 | } 119 | 120 | init(); 121 | 122 | $(window).resize(function() { setProportion(); }); 123 | plugin.$videoEl.bind('ended', function(){ this.play(); }); 124 | } 125 | })(jQuery); 126 | -------------------------------------------------------------------------------- /jquery.backgroundvideo.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery Background video plugin for jQuery 3 | * --- 4 | * Copyright 2011, Victor Coulon (http://victorcoulon.fr) 5 | * Released under the MIT, BSD, and GPL Licenses. 6 | * based on jQuery Plugin Boilerplate 1.3 7 | */ 8 | 9 | (function(t){t.backgroundVideo=function(e,i){var n={videoid:"video_background",autoplay:true,loop:true,preload:true};var s=this;s.settings={};var o=function(){s.settings=t.extend({},n,i);s.el=e;d()};var d=function(){var e="",i="",n="",o="",d=s.settings.preload,g=s.settings.autoplay,a=s.settings.loop;if(d){i='preload="auto"'}else{i=""}if(g){n='autoplay="autoplay"'}else{n=""}if(a){o='loop="true"'}else{o=""}e+='

";s.el.prepend(e);s.videoEl=document.getElementById(s.settings.videoid);s.$videoEl=t(s.videoEl);s.$videoEl.fadeIn(2e3);r()};var r=function(){var t=g();s.$videoEl.width(t*s.settings.width);s.$videoEl.height(t*s.settings.height);if(typeof s.settings.align!=="undefined"){a()}};var g=function(){var e=t(window).width();var i=t(window).height();var n=e/i;var o=s.settings.width/s.settings.height;var d=i/s.settings.height;if(n>=o){d=e/s.settings.width}return d};var a=function(){var e=(t(window).width()>>1)-(s.$videoEl.width()>>1)|0;var i=(t(window).height()>>1)-(s.$videoEl.height()>>1)|0;if(s.settings.align=="centerXY"){s.$videoEl.css({left:e,top:i});return}if(s.settings.align=="centerX"){s.$videoEl.css("left",e);return}if(s.settings.align=="centerY"){s.$videoEl.css("top",i);return}};o();t(window).resize(function(){r()});s.$videoEl.bind("ended",function(){this.play()})}})(jQuery); -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # jQuery - Background video plugin 2 | 3 | Add a background video to your website… 4 | 5 | ## Download 6 | 7 | The full source can be downloaded from the master branch on GitHub (as a zip or gz) or installed via bower (`bower install background-video`). 8 | 9 | ## Usage 10 | 11 | Add the script to your homepage after jquery `` 12 | 13 | And launch the plugin : 14 | 15 | 30 | 31 | 32 | ## Examples 33 | 34 | Check out the `example` folder. 35 | --------------------------------------------------------------------------------