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