1/* Light YouTube Embeds by @labnol */ 2/* Web: http://labnol.org/?p=27941 */ 3 4document.addEventListener("DOMContentLoaded", 5 function () { 6 var div, n, 7 v = document.getElementsByClassName("youtube-player"); 8 for (n = 0; n < v.length; n++) { 9 div = document.createElement("div"); 10 div.setAttribute("data-id", v[n].dataset.id); 11 div.innerHTML = labnolThumb(v[n].dataset.id); 12 div.onclick = labnolIframe; 13 v[n].appendChild(div); 14 } 15 }); 16 17function labnolThumb(id) { 18 var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">', 19 play = '<div class="play"></div>'; 20 return thumb.replace("ID", id) + play; 21} 22 23function labnolIframe() { 24 var iframe = document.createElement("iframe"); 25 var embed = "https://www.youtube.com/embed/ID?autoplay=1"; 26 iframe.setAttribute("src", embed.replace("ID", this.dataset.id)); 27 iframe.setAttribute("frameborder", "0"); 28 iframe.setAttribute("allowfullscreen", "1"); 29 this.parentNode.replaceChild(iframe, this); 30} 31 32// END YOUTUBE
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.