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 13/* 14 è¤æ°ã®youtubeåç»ã¸ã®å¯¾å¿ã¨ããã°èª¿æ´ 15 2016/12/22 y-tasaka 16 17*/ 18 19;(function ($, window) { 20 21 // test for feature support and return if failure 22 23 // defaults 24 var defaults = { 25 ratio: 16/9, // usually either 4/3 or 16/9 -- tweak as needed 26 videoId: '', // toy robot in space is a good default, no? 27 mute: true, 28 repeat: true, 29 width: $(window).width(), 30 // wrapperZIndex: 99, 31 playButtonClass: 'tubular-play', 32 pauseButtonClass: 'tubular-pause', 33 muteButtonClass: 'tubular-mute', 34 volumeUpClass: 'tubular-volume-up', 35 volumeDownClass: 'tubular-volume-down', 36 increaseVolumeBy: 10, 37 start: 0 38 }; 39 40 ytPlayers = new Object(); 41 // methods 42 43 var tubular = function(node, options) { // should be called on the wrapper div 44 var options = $.extend({}, defaults, options); 45 // $body = $('body') // cache body node 46 var $body = $(options.target); 47 options.width = $body.parent().css('width'); 48 var $node = $(node); // cache wrapper node 49 50 51 if(options.videoId == ""){ 52 return false; 53 } 54 55 // multi 56 var areaId = $body.parent().attr('id'); 57 var playerId = "tubular-player"+options.videoId+"-"+areaId; 58 var tubularContainer = '<div id="tubular-container" style="overflow: hidden; z-index: 1; width: 100%; height: 100%;"><div id="'+playerId+'" class="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>'; 59 60 $body.hide(); 61 $body.prepend(tubularContainer); 62 // $node.css({position: 'relative', 'z-index': options.wrapperZIndex}); 63 64 // set up iframe player, use global scope so YT api can talk 65 window.player; 66 67 var onReady = function(e) { 68 resize(); 69 70 if (options.mute) e.target.mute(); 71 e.target.seekTo(options.start); 72 // 20220509 nakashima 73 $node.show(); 74 // $(e.target.h).closest('.backgroundYoutube').show(); 75 e.target.playVideo(); 76 77 }; 78 var onStateChange = function(state) { 79 if (state.data === 0 && options.repeat) { // video ended and repeat option is set true 80 player.seekTo(options.start); // restart 81 } 82 }; 83 // window.onYouTubeIframeAPIReady = function() { 84 var player = new YT.Player(playerId, { 85 width: options.width, 86 height: Math.ceil(options.width / options.ratio), 87 videoId: options.videoId, 88 playerVars: { 89 controls: 0, 90 showinfo: 0, 91 modestbranding: 1, 92 wmode: 'transparent', 93 rel:0 94 }, 95 events: { 96 'onReady': onReady, 97 'onStateChange': onStateChange 98 } 99 }); 100 // } 101 ytPlayers[playerId] = player; 102 103 104 // resize handler updates width, height and offset of player after resize/init 105 var resize = function() { 106 $(".tubular_player").each(function(){ 107 var $sectionArea = $(this).closest('.section-area'); 108 var width = $sectionArea.width(), 109 pWidth, // player width, to be defined 110 height = $sectionArea.height(), 111 pHeight, // player height, tbd 112 $tubularPlayer = $(this); 113 114 // when screen aspect ratio differs from video, video must center and underlay one dimension 115 116 if (width / options.ratio < height) { // if new video height < window height (gap underneath) 117 pWidth = Math.ceil(height * options.ratio); // get new player width 118 $tubularPlayer.width(pWidth).height(height).css({left: (width - pWidth) / 2, top: 0}); // player width is greater, offset left; reset top 119 } else { // new video width < window width (gap to right) 120 pHeight = Math.ceil(width / options.ratio); // get new player height 121 $tubularPlayer.width(width).height(pHeight).css({left: 0, top: (height - pHeight) / 2}); // player height is greater, offset top; reset left 122 } 123 }); 124 125 } 126 127 // events 128 $(window).on('resize.tubular', function() { 129 resize(); 130 }) 131 // 132 // $('body').on('click','.' + options.playButtonClass, function(e) { // play button 133 // e.preventDefault(); 134 // player.playVideo(); 135 // }).on('click', '.' + options.pauseButtonClass, function(e) { // pause button 136 // e.preventDefault(); 137 // player.pauseVideo(); 138 // }).on('click', '.' + options.muteButtonClass, function(e) { // mute button 139 // e.preventDefault(); 140 // (player.isMuted()) ? player.unMute() : player.mute(); 141 // }).on('click', '.' + options.volumeDownClass, function(e) { // volume down button 142 // e.preventDefault(); 143 // var currentVolume = player.getVolume(); 144 // if (currentVolume < options.increaseVolumeBy) currentVolume = options.increaseVolumeBy; 145 // player.setVolume(currentVolume - options.increaseVolumeBy); 146 // }).on('click', '.' + options.volumeUpClass, function(e) { // volume up button 147 // e.preventDefault(); 148 // if (player.isMuted()) player.unMute(); // if mute is on, unmute 149 // var currentVolume = player.getVolume(); 150 // if (currentVolume > 100 - options.increaseVolumeBy) currentVolume = 100 - options.increaseVolumeBy; 151 // player.setVolume(currentVolume + options.increaseVolumeBy); 152 // }) 153 } 154 155 // load yt iframe js api 156 var tag = document.createElement('script'); 157 tag.src = "//www.youtube.com/iframe_api"; 158 var firstScriptTag = document.getElementsByTagName('script')[0]; 159 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 160 161 $.fn.tubular = function (options) { 162 return this.each(function () { 163 // if (!$.data(this, 'tubular_instantiated')) { // let's only run one 164 $.data(this, 'tubular_instantiated', 165 tubular(this, options)); 166 // } 167 }); 168 } 169 170})(jQuery, window);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.