diff --git a/snippet_video_bg/static/lib/jquery.tubular.1.0.js b/snippet_video_bg/static/lib/jquery.tubular.1.0.js new file mode 100644 index 000000000..0374d142d --- /dev/null +++ b/snippet_video_bg/static/lib/jquery.tubular.1.0.js @@ -0,0 +1,148 @@ +/* jQuery tubular plugin +|* by Sean McCambridge +|* http://www.seanmccambridge.com/tubular +|* version: 1.0 +|* updated: October 1, 2012 +|* since 2010 +|* licensed under the MIT License +|* Enjoy. +|* +|* Thanks, +|* Sean */ + +;(function ($, window) { + + // test for feature support and return if failure + + // defaults + var defaults = { + 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(), + wrapperZIndex: 99, + playButtonClass: 'tubular-play', + pauseButtonClass: 'tubular-pause', + muteButtonClass: 'tubular-mute', + volumeUpClass: 'tubular-volume-up', + volumeDownClass: 'tubular-volume-down', + increaseVolumeBy: 10, + start: 0 + }; + + // methods + + var tubular = function(node, options) { // should be called on the wrapper div + var options = $.extend({}, defaults, options), + $body = $('body') // cache body node + $node = $(node); // cache wrapper node + + // build container + var tubularContainer = '
'; + + // set up css prereq's, inject tubular container and set up wrapper defaults + $('html,body').css({'width': '100%', 'height': '100%'}); + $body.prepend(tubularContainer); + $node.css({position: 'relative', 'z-index': options.wrapperZIndex}); + + // set up iframe player, use global scope so YT api can talk + window.player; + window.onYouTubeIframeAPIReady = function() { + player = new YT.Player('tubular-player', { + width: options.width, + height: Math.ceil(options.width / options.ratio), + videoId: options.videoId, + playerVars: { + controls: 0, + showinfo: 0, + modestbranding: 1, + wmode: 'transparent' + }, + events: { + 'onReady': onPlayerReady, + 'onStateChange': onPlayerStateChange + } + }); + } + + window.onPlayerReady = function(e) { + resize(); + if (options.mute) e.target.mute(); + e.target.seekTo(options.start); + e.target.playVideo(); + } + + window.onPlayerStateChange = function(state) { + if (state.data === 0 && options.repeat) { // video ended and repeat option is set true + player.seekTo(options.start); // restart + } + } + + // resize handler updates width, height and offset of player after resize/init + var resize = function() { + var width = $(window).width(), + pWidth, // player width, to be defined + height = $(window).height(), + pHeight, // player height, tbd + $tubularPlayer = $('#tubular-player'); + + // when screen aspect ratio differs from video, video must center and underlay one dimension + + if (width / options.ratio < height) { // if new video height < window height (gap underneath) + pWidth = Math.ceil(height * options.ratio); // get new player width + $tubularPlayer.width(pWidth).height(height).css({left: (width - pWidth) / 2, top: 0}); // player width is greater, offset left; reset top + } else { // new video width < window width (gap to right) + pHeight = Math.ceil(width / options.ratio); // get new player height + $tubularPlayer.width(width).height(pHeight).css({left: 0, top: (height - pHeight) / 2}); // player height is greater, offset top; reset left + } + + } + + // events + $(window).on('resize.tubular', function() { + resize(); + }) + + $('body').on('click','.' + options.playButtonClass, function(e) { // play button + e.preventDefault(); + player.playVideo(); + }).on('click', '.' + options.pauseButtonClass, function(e) { // pause button + e.preventDefault(); + player.pauseVideo(); + }).on('click', '.' + options.muteButtonClass, function(e) { // mute button + e.preventDefault(); + (player.isMuted()) ? player.unMute() : player.mute(); + }).on('click', '.' + options.volumeDownClass, function(e) { // volume down button + e.preventDefault(); + var currentVolume = player.getVolume(); + if (currentVolume < options.increaseVolumeBy) currentVolume = options.increaseVolumeBy; + player.setVolume(currentVolume - options.increaseVolumeBy); + }).on('click', '.' + options.volumeUpClass, function(e) { // volume up button + e.preventDefault(); + if (player.isMuted()) player.unMute(); // if mute is on, unmute + var currentVolume = player.getVolume(); + if (currentVolume > 100 - options.increaseVolumeBy) currentVolume = 100 - options.increaseVolumeBy; + player.setVolume(currentVolume + options.increaseVolumeBy); + }) + } + + // load yt iframe js api + + var tag = document.createElement('script'); + tag.src = "//www.youtube.com/iframe_api"; + var firstScriptTag = document.getElementsByTagName('script')[0]; + firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); + + // create plugin + + $.fn.tubular = function (options) { + return this.each(function () { + if (!$.data(this, 'tubular_instantiated')) { // let's only run one + $.data(this, 'tubular_instantiated', + tubular(this, options)); + } + }); + } + +})(jQuery, window); \ No newline at end of file