A973C · September 10, 2015 04:48 · Sep 8, 2015
diff --git a/YouTube embedding.markdown b/YouTube embedding.markdown
@@ -0,0 +1,7 @@
+YouTube embedding
+-----------------
+Pen for the awesome tutorial on http://www.labnol.org/internet/light-youtube-embeds/27941/
+
+A [Pen](http://codepen.io/SaijoGeorge/pen/meJWGX) by [Saijo George](http://codepen.io/SaijoGeorge) on [CodePen](http://codepen.io/).
+
+[License](http://codepen.io/SaijoGeorge/pen/meJWGX/license).
diff --git a/index.html b/index.html
@@ -0,0 +1,7 @@
+<div class="one">
+<div class="youtube-container">
+   <div class="youtube-player" data-id="oCp9IcdSpZI"></div>
+</div>
+</div>
+
+More snippets at : <a href="http://codemyui.com/">CodeMyUI.com</a>
diff --git a/script.js b/script.js
@@ -0,0 +1,21 @@
+(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"></div>';
+}
+
+function labnolIframe() {
+    var iframe = document.createElement("iframe");
+    iframe.setAttribute("src", "//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);
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,11 @@
+.one {
+  margin: 50px auto 20px auto;
+  padding: 10px;
+  border-bottom: 2px solid #eee;
+  width: 500px;
+}
+.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; }
+.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; }