infoscigeek

Light YouTube Embeds by @labnol

Apr 2nd, 2019
54
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script>
  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.onclick = labnolIframe;
  14.                 v[n].appendChild(div);
  15.             }
  16.         });
  17.  
  18.     function labnolThumb(id) {
  19.         var thumb = '<img src="//i.ytimg.com/vi/ID/hqdefault.jpg">',
  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. </script>
Add Comment
Please, Sign In to add comment