Skip to content

Instantly share code, notes, and snippets.

@AucT

AucT/youtube_iframe.html

Created August 23, 2016 15:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AucT/87b241debb124211612ba1497b2a2763 to your computer and use it in GitHub Desktop.
Save AucT/87b241debb124211612ba1497b2a2763 to your computer and use it in GitHub Desktop.
Download ZIP
Youtube Iframe load on thumb click
Raw
youtube_iframe.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Youtube Iframe load on thumb click</title>
<style>
.youtube {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.youtube iframe, .youtube object, .youtube embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.youtube__img {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
height: auto;
cursor: pointer;
}
.youtube__play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url("http://i.imgur.com/TxzC70f.png") no-repeat;
cursor: pointer;
}
</style>
</head>
<body style="max-width: 800px; margin: 0 auto">
<div class="youtube" data-id="JLf9q36UsBk"></div>
<p>Credits to <a href="http://embedresponsively.com/">embedresponsively.com for Responsive embed</a>, <a href="http://www.labnol.org/internet/light-youtube-embeds/27941/">labnol.org For the javascript functionality</a></p>
<script>
(function () {
var v = document.getElementsByClassName("youtube");
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__img" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="youtube__play"></div>';
}
function labnolIframe() {
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
iframe.setAttribute("id", "youtube-iframe");
this.parentNode.replaceChild(iframe, this);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment