/templates/tubelar/assets/js/jquery.tubular.1.0.js
https://github.com/deltafactory/landing-pages · JavaScript · 148 lines · 105 code · 21 blank · 22 comment · 9 complexity · 9c12b6a143bbdcd08bc60a520055217a MD5 · raw file
- /* 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: 'nKRPONHmsgo', // 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 = '<div id="tubular-container" style="overflow: hidden; position: fixed; z-index: 1; width: 100%; height: 100%"><div id="tubular-player" style="position: absolute"></div></div><div id="tubular-shield" style="width: 100%; height: 100%; z-index: 2; position: absolute; left: 0; top: 0;"></div>';
- // 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);