pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
jquery.backgroundvideo.min.js
(2850B)
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 }
16
17 var plugin = this;
18
19 plugin.settings = {}
20
21 var init = function() {
22 plugin.settings = $.extend({}, defaults, options);
23 plugin.el = el;
24
25 buildVideo();
26 }
27
28 var buildVideo = function () {
29 var html = '';
30 html += '<video id="'+plugin.settings.videoid+'" preload="auto"';
31
32 if (plugin.settings.poster) {
33 html += ' poster="' + plugin.settings.poster + '" ';
34 }
35
36 html += 'style="display:none;position:fixed;top:0;left:0;bottom:0;right:0;z-index:-100;width:100%;height:100%;">';
37 for(var i=0; i < plugin.settings.types.length; i++) {
38 html += '<source src="'+plugin.settings.path+plugin.settings.filename+'.'+plugin.settings.types[i]+'" type="video/'+plugin.settings.types[i]+'" />';
39 }
40 html += 'bgvideo</video>';
41 plugin.el.prepend(html);
42 plugin.videoEl = document.getElementById(plugin.settings.videoid);
43 plugin.$videoEl = $(plugin.videoEl);
44 plugin.$videoEl.fadeIn(2000);
45 setProportion();
46 }
47
48 var setProportion = function () {
49 var proportion = getProportion();
50 plugin.$videoEl.width(proportion*plugin.settings.width);
51 plugin.$videoEl.height(proportion*plugin.settings.height);
52
53 if (typeof plugin.settings.align !== 'undefined') {
54 centerVideo();
55 }
56 }
57
58 var getProportion = function () {
59 var windowWidth = $(window).width();
60 var windowHeight = $(window).height();
61 var windowProportion = windowWidth / windowHeight;
62 var origProportion = plugin.settings.width / plugin.settings.height;
63 var proportion = windowHeight / plugin.settings.height;
64
65 if (windowProportion >= origProportion) {
66 proportion = windowWidth / plugin.settings.width;
67 }
68
69 return proportion;
70 }
71
72 var centerVideo = function() {
73 var centerX = (($(window).width() >> 1) - (plugin.$videoEl.width() >> 1)) | 0;
74 var centerY = (($(window).height() >> 1) - (plugin.$videoEl.height() >> 1)) | 0;
75
76 if (plugin.settings.align == 'centerXY') {
77 plugin.$videoEl.css({ 'left': centerX, 'top': centerY });
78 return;
79 }
80
81 if (plugin.settings.align == 'centerX') {
82 plugin.$videoEl.css('left', centerX);
83 return;
84 }
85
86 if (plugin.settings.align == 'centerY') {
87 plugin.$videoEl.css('top', centerY);
88 return;
89 }
90 }
91
92 init();
93
94 $(window).resize(function() { setProportion(); });
95 plugin.$videoEl.bind('ended', function(){ this.play(); });
96 }
97 })(jQuery);