Skip to content

Instantly share code, notes, and snippets.

@tutweb

tutweb/jw-embed-youtube.html

Last active July 16, 2016 09:15
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 tutweb/df0dc34db13062f57acf6a44647f4fa0 to your computer and use it in GitHub Desktop.
Save tutweb/df0dc34db13062f57acf6a44647f4fa0 to your computer and use it in GitHub Desktop.
Download ZIP
Script Embed YouTube Video Player Responsive
Raw
jw-embed-youtube.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Youtube</title>
<style>
header h1{font-size:20px;}
header p{margin:5px auto}
.youtube-container { display: block; /*margin: 20px auto;*/ width: 100%; max-width: 600px; border:1px solid #000; }
.youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button { 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; }
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
</style>
</head>
<body>
<header>
<h1>Jurnalweb.com</h1>
<p>Demo embed video player YouTube responsive dan hemat resource</p>
<p>Baca tutorial <strong><a href="http://www.jurnalweb.com/cara-embed-video-youtube-responsive-efisien-tidak-berat">disini</a></strong></p>
</header>
<div class="youtube-container">
<div class="youtube-player" data-id="iWZM7dNTokY"></div>
</div>
<script>
(function() {
var v = document.getElementsByClassName("youtube-player");
for (var n = 0; n < v.length; n++) {
var p = document.createElement("div");
p.innerHTML = JWTubeThumb(v[n].dataset.id);
p.onclick = JWTubeIframe;
v[n].appendChild(p);
}
})();
function JWTubeThumb(id) {
return '<img class="youtube-thumb" src="http://i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}
function JWTubeIframe() {
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "http://www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
iframe.setAttribute("frameborder", "0");
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