Skip to content

Instantly share code, notes, and snippets.

@chris-79
Created December 16, 2017 16:17
Show Gist options
  • Save chris-79/1574412948c5fedb3c8db0956766367e to your computer and use it in GitHub Desktop.
Save chris-79/1574412948c5fedb3c8db0956766367e to your computer and use it in GitHub Desktop.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment