/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

  1. /* jQuery tubular plugin
  2. |* by Sean McCambridge
  3. |* http://www.seanmccambridge.com/tubular
  4. |* version: 1.0
  5. |* updated: October 1, 2012
  6. |* since 2010
  7. |* licensed under the MIT License
  8. |* Enjoy.
  9. |*
  10. |* Thanks,
  11. |* Sean */
  12. ;(function ($, window) {
  13. // test for feature support and return if failure
  14. // defaults
  15. var defaults = {
  16. ratio: 16/9, // usually either 4/3 or 16/9 -- tweak as needed
  17. videoId: 'nKRPONHmsgo', // toy robot in space is a good default, no?
  18. mute: true,
  19. repeat: true,
  20. width: $(window).width(),
  21. wrapperZIndex: 99,
  22. playButtonClass: 'tubular-play',
  23. pauseButtonClass: 'tubular-pause',
  24. muteButtonClass: 'tubular-mute',
  25. volumeUpClass: 'tubular-volume-up',
  26. volumeDownClass: 'tubular-volume-down',
  27. increaseVolumeBy: 10,
  28. start: 0
  29. };
  30. // methods
  31. var tubular = function(node, options) { // should be called on the wrapper div
  32. var options = $.extend({}, defaults, options),
  33. $body = $('body') // cache body node
  34. $node = $(node); // cache wrapper node
  35. // build container
  36. 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>';
  37. // set up css prereq's, inject tubular container and set up wrapper defaults
  38. $('html,body').css({'width': '100%', 'height': '100%'});
  39. $body.prepend(tubularContainer);
  40. $node.css({position: 'relative', 'z-index': options.wrapperZIndex});
  41. // set up iframe player, use global scope so YT api can talk
  42. window.player;
  43. window.onYouTubeIframeAPIReady = function() {
  44. player = new YT.Player('tubular-player', {
  45. width: options.width,
  46. height: Math.ceil(options.width / options.ratio),
  47. videoId: options.videoId,
  48. playerVars: {
  49. controls: 0,
  50. showinfo: 0,
  51. modestbranding: 1,
  52. wmode: 'transparent'
  53. },
  54. events: {
  55. 'onReady': onPlayerReady,
  56. 'onStateChange': onPlayerStateChange
  57. }
  58. });
  59. }
  60. window.onPlayerReady = function(e) {
  61. resize();
  62. if (options.mute) e.target.mute();
  63. e.target.seekTo(options.start);
  64. e.target.playVideo();
  65. }
  66. window.onPlayerStateChange = function(state) {
  67. if (state.data === 0 && options.repeat) { // video ended and repeat option is set true
  68. player.seekTo(options.start); // restart
  69. }
  70. }
  71. // resize handler updates width, height and offset of player after resize/init
  72. var resize = function() {
  73. var width = $(window).width(),
  74. pWidth, // player width, to be defined
  75. height = $(window).height(),
  76. pHeight, // player height, tbd
  77. $tubularPlayer = $('#tubular-player');
  78. // when screen aspect ratio differs from video, video must center and underlay one dimension
  79. if (width / options.ratio < height) { // if new video height < window height (gap underneath)
  80. pWidth = Math.ceil(height * options.ratio); // get new player width
  81. $tubularPlayer.width(pWidth).height(height).css({left: (width - pWidth) / 2, top: 0}); // player width is greater, offset left; reset top
  82. } else { // new video width < window width (gap to right)
  83. pHeight = Math.ceil(width / options.ratio); // get new player height
  84. $tubularPlayer.width(width).height(pHeight).css({left: 0, top: (height - pHeight) / 2}); // player height is greater, offset top; reset left
  85. }
  86. }
  87. // events
  88. $(window).on('resize.tubular', function() {
  89. resize();
  90. })
  91. $('body').on('click','.' + options.playButtonClass, function(e) { // play button
  92. e.preventDefault();
  93. player.playVideo();
  94. }).on('click', '.' + options.pauseButtonClass, function(e) { // pause button
  95. e.preventDefault();
  96. player.pauseVideo();
  97. }).on('click', '.' + options.muteButtonClass, function(e) { // mute button
  98. e.preventDefault();
  99. (player.isMuted()) ? player.unMute() : player.mute();
  100. }).on('click', '.' + options.volumeDownClass, function(e) { // volume down button
  101. e.preventDefault();
  102. var currentVolume = player.getVolume();
  103. if (currentVolume < options.increaseVolumeBy) currentVolume = options.increaseVolumeBy;
  104. player.setVolume(currentVolume - options.increaseVolumeBy);
  105. }).on('click', '.' + options.volumeUpClass, function(e) { // volume up button
  106. e.preventDefault();
  107. if (player.isMuted()) player.unMute(); // if mute is on, unmute
  108. var currentVolume = player.getVolume();
  109. if (currentVolume > 100 - options.increaseVolumeBy) currentVolume = 100 - options.increaseVolumeBy;
  110. player.setVolume(currentVolume + options.increaseVolumeBy);
  111. })
  112. }
  113. // load yt iframe js api
  114. var tag = document.createElement('script');
  115. tag.src = "//www.youtube.com/iframe_api";
  116. var firstScriptTag = document.getElementsByTagName('script')[0];
  117. firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  118. // create plugin
  119. $.fn.tubular = function (options) {
  120. return this.each(function () {
  121. if (!$.data(this, 'tubular_instantiated')) { // let's only run one
  122. $.data(this, 'tubular_instantiated',
  123. tubular(this, options));
  124. }
  125. });
  126. }
  127. })(jQuery, window);