Pen for the awesome tutorial on http://www.labnol.org/internet/light-youtube-embeds/27941/
A Pen by Saijo George on CodePen.
<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> |
(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); | |
} |
.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; } |
Pen for the awesome tutorial on http://www.labnol.org/internet/light-youtube-embeds/27941/
A Pen by Saijo George on CodePen.