youtube-embed.html

<div class="youtube-section" id="video-{{ youtube_id }}">
  <div class="youtube-container">
    <div class="youtube-watermark">
      {{ theme:output src="svg/uga-college-logo-white.svg" }}
    </div>
    <div class="youtube-player" data-id="{{ youtube_id }}"></div>
    {{ if video_title || video_description }}
    <div class="row padd-top-default">
      <article>
        {{ if video_title }}
        <h2 class="as-heading-small as-heading-small--typeset-trailer">{{ video_title }}</h2>
        {{ /if }}
        {{ if video_description }}
        <div class="is-typeset">
          {{ video_description|markdown }}
        </div>
        {{ /if }}
      </article>
    </div>
    {{ /if }}
  </div>
  <div class="row">
  </div>

  <script>
    // we load the video via javascript to reduce amount of data transferred on page load
    (function() {
      var v = document.getElementsByClassName("youtube-player");
      for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = labnolThumb(v[n].dataset.id);
        p.onclick = labnolIframe;
        v[n].appendChild(p);
      }
    })();
    function labnolThumb(id) {
      return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"><svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="m .66,37.62 c 0,0 .66,4.70 2.70,6.77 2.58,2.71 5.98,2.63 7.49,2.91 5.43,.52 23.10,.68 23.12,.68 .00,-1.3e-5 14.29,-0.02 23.81,-0.71 1.32,-0.15 4.22,-0.17 6.81,-2.89 2.03,-2.07 2.70,-6.77 2.70,-6.77 0,0 .67,-5.52 .67,-11.04 l 0,-5.17 c 0,-5.52 -0.67,-11.04 -0.67,-11.04 0,0 -0.66,-4.70 -2.70,-6.77 C 62.03,.86 59.13,.84 57.80,.69 48.28,0 34.00,0 34.00,0 33.97,0 19.69,0 10.18,.69 8.85,.84 5.95,.86 3.36,3.58 1.32,5.65 .66,10.35 .66,10.35 c 0,0 -0.55,4.50 -0.66,9.45 l 0,8.36 c .10,4.94 .66,9.45 .66,9.45 z" fill="#1f1f1e" fill-opacity="0.81"></path><path d="m 26.96,13.67 18.37,9.62 -18.37,9.55 -0.00,-19.17 z" fill="#fff"></path><path d="M 45.02,23.46 45.32,23.28 26.96,13.67 43.32,24.34 45.02,23.46 z" fill="#ccc"></path></svg></div>';
    }
    function labnolIframe() {
      var iframe = document.createElement("iframe");
      var vidid = this.parentNode.dataset.id;
      $('html, body').animate({ scrollTop: $('#video-' + vidid).offset().top }, 700);
      iframe.setAttribute("src", "//www.youtube.com/embed/" + vidid + "?autoplay=1&modestbranding=1&rel=0&cc_load_policy=1&showinfo=0&disablekb=1&hd=1&autohide=1&controls=2");
      iframe.setAttribute("class", "youtube-iframe");
      iframe.setAttribute("width", "100%");
      iframe.setAttribute("height", "100%");
      iframe.setAttribute("allowfullscreen", "1");
      this.parentNode.replaceChild(iframe, this);
    }
  </script>
</div>