1/*! 2* lazyYT (lazy load YouTube videos) 3* v1.0.1 - 2014-12-30 4* (CC) This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. 5* http://creativecommons.org/licenses/by-sa/4.0/ 6* Contributors: https://github.com/tylerpearson/lazyYT/graphs/contributors || https://github.com/daugilas/lazyYT/graphs/contributors 7* 8* Usage: <div class="lazyYT" data-youtube-id="laknj093n" data-parameters="rel=0">loading...</div> 9*/ 10 11;(function ($) { 12 'use strict'; 13 14 function setUp($el, settings, $counter) { 15 var width = $el.data('width'), 16 height = $el.data('height'), 17 ratio = ($el.data('ratio')) ? $el.data('ratio') : settings.default_ratio, 18 id = $el.data('youtube-id'), 19 padding_bottom, 20 innerHtml = [], 21 $thumb, 22 thumb_img, 23 loading_text = $el.text() ? $el.text() : settings.loading_text, 24 youtube_parameters = $el.data('parameters') || ''; 25 26 ratio = ratio.split(":"); 27 28 // width and height might override default_ratio value 29 if (typeof width === 'number' && typeof height === 'number') { 30 $el.width(width); 31 padding_bottom = height + 'px'; 32 } else if (typeof width === 'number') { 33 $el.width(width); 34 padding_bottom = (width * ratio[1] / ratio[0]) + 'px'; 35 } else { 36 width = $el.width(); 37 38 // no width means that container is fluid and will be the size of its parent 39 if (width == 0) { 40 width = $el.parent().width(); 41 } 42 43 padding_bottom = (ratio[1] / ratio[0] * 100) + '%'; 44 } 45 46 // 47 // This HTML will be placed inside 'lazyYT' container 48 49 innerHtml.push('<div class="ytp-thumbnail">'); 50 51 // Play button from YouTube (exactly as it is in YouTube) 52 innerHtml.push('<div class="ytp-large-play-button"'); 53 if (width <= 640) innerHtml.push(' style="transform: scale(0.563888888888889);"'); 54 innerHtml.push('>'); 55 innerHtml.push('<svg aria-label="video_play_button">'); 56 innerHtml.push('<title>Video '+ $counter +'</title>'); 57 innerHtml.push('<path fill-rule="evenodd" clip-rule="evenodd" fill="#1F1F1F" class="ytp-large-play-button-svg" d="M84.15,26.4v6.35c0,2.833-0.15,5.967-0.45,9.4c-0.133,1.7-0.267,3.117-0.4,4.25l-0.15,0.95c-0.167,0.767-0.367,1.517-0.6,2.25c-0.667,2.367-1.533,4.083-2.6,5.15c-1.367,1.4-2.967,2.383-4.8,2.95c-0.633,0.2-1.316,0.333-2.05,0.4c-0.767,0.1-1.3,0.167-1.6,0.2c-4.9,0.367-11.283,0.617-19.15,0.75c-2.434,0.034-4.883,0.067-7.35,0.1h-2.95C38.417,59.117,34.5,59.067,30.3,59c-8.433-0.167-14.05-0.383-16.85-0.65c-0.067-0.033-0.667-0.117-1.8-0.25c-0.9-0.133-1.683-0.283-2.35-0.45c-2.066-0.533-3.783-1.5-5.15-2.9c-1.033-1.067-1.9-2.783-2.6-5.15C1.317,48.867,1.133,48.117,1,47.35L0.8,46.4c-0.133-1.133-0.267-2.55-0.4-4.25C0.133,38.717,0,35.583,0,32.75V26.4c0-2.833,0.133-5.95,0.4-9.35l0.4-4.25c0.167-0.966,0.417-2.05,0.75-3.25c0.7-2.333,1.567-4.033,2.6-5.1c1.367-1.434,2.967-2.434,4.8-3c0.633-0.167,1.333-0.3,2.1-0.4c0.4-0.066,0.917-0.133,1.55-0.2c4.9-0.333,11.283-0.567,19.15-0.7C35.65,0.05,39.083,0,42.05,0L45,0.05c2.467,0,4.933,0.034,7.4,0.1c7.833,0.133,14.2,0.367,19.1,0.7c0.3,0.033,0.833,0.1,1.6,0.2c0.733,0.1,1.417,0.233,2.05,0.4c1.833,0.566,3.434,1.566,4.8,3c1.066,1.066,1.933,2.767,2.6,5.1c0.367,1.2,0.617,2.284,0.75,3.25l0.4,4.25C84,20.45,84.15,23.567,84.15,26.4z M33.3,41.4L56,29.6L33.3,17.75V41.4z"></path>'); 58 innerHtml.push('<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="33.3,41.4 33.3,17.75 56,29.6"></polygon>'); 59 innerHtml.push('</svg>'); 60 innerHtml.push('</div>'); // end of .ytp-large-play-button 61 62 innerHtml.push('</div>'); // end of .ytp-thumbnail 63 64 // Video title (info bar) 65 innerHtml.push('<div class="html5-info-bar">'); 66 innerHtml.push('<div class="html5-title">'); 67 innerHtml.push('<div class="html5-title-text-wrapper">'); 68 innerHtml.push('<a id="lazyYT-title-', id, '" class="html5-title-text" target="_blank" tabindex="3100" href="//www.youtube.com/watch?v=', id, '">'); 69 innerHtml.push(loading_text); 70 innerHtml.push('</a>'); 71 innerHtml.push('</div>'); // .html5-title 72 innerHtml.push('</div>'); // .html5-title-text-wrapper 73 innerHtml.push('</div>'); // end of Video title .html5-info-bar 74 75 $el.css({ 76 'padding-bottom': padding_bottom 77 }) 78 .html(innerHtml.join('')); 79 80 if (width > 640) { 81 thumb_img = 'hqdefault.jpg'; 82 } else if (width > 480) { 83 thumb_img = 'hqdefault.jpg'; 84 } else if (width > 320) { 85 thumb_img = 'hqdefault.jpg'; 86 } else if (width > 120) { 87 thumb_img = 'hqdefault.jpg'; 88 } else if (width == 0) { // sometimes it fails on fluid layout 89 thumb_img = 'hqdefault.jpg'; 90 } else { 91 thumb_img = 'default.jpg'; 92 } 93 94 $thumb = $el.find('.ytp-thumbnail').css({ 95 'background-image': ['url(//img.youtube.com/vi/', id, '/', thumb_img, ')'].join('') 96 }) 97 .addClass('lazyYT-image-loaded') 98 .on('click', function (e) { 99 e.preventDefault(); 100 if (!$el.hasClass('lazyYT-video-loaded') && $thumb.hasClass('lazyYT-image-loaded')) { 101 $el.html('<iframe src="//www.youtube.com/embed/' + id + '?rel=0&autoplay=1&enablejsapi=1&' + youtube_parameters + '" frameborder="0" allowfullscreen title="FENETRE DE VIDEO YOUTUBE ' + $counter + '"></iframe>') 102 .addClass('lazyYT-video-loaded'); 103 } 104 }); 105 106 /*$.getJSON('//gdata.youtube.com/feeds/api/videos/' + id + '?v=2&alt=json', function (data) { 107 $el.find('#lazyYT-title-' + id).text(data.entry.title.$t); 108 });*/ 109 110 $.getJSON('https://www.googleapis.com/youtube/v3/videos?id=' + id + '&key=AIzaSyCMaFm8uDTbDsHm5zTIbabjDqeTu0Rxqac&part=snippet', function (data) { 111 $el.find('#lazyYT-title-' + id).text(data.items[0].title); 112 }); 113 114 } 115 116 $.fn.lazyYT = function (newSettings) { 117 var defaultSettings = { 118 loading_text: 'Loading...', 119 default_ratio: '16:9', 120 callback: null, // ToDO execute callback if given
121 container_class: 'lazyYT-container' 122 }; 123 var settings = $.extend(defaultSettings, newSettings); 124 var $counter= 1; 125 return this.each(function () { 126 var $el = $(this).addClass(settings.container_class); 127 setUp($el, settings, $counter); 128 $counter++; 129 }); 130 }; 131 132}(jQuery));
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.