JSFiddle - React, Tailwind, and code Playground

HTML

<div style="text-align:center;"><a class="youtube-lazy-link" style="width:420px;height:315px;" href="http://www.youtube.com/watch?v=amQbb85XpvE&rel=0">nukkumatti</a><br />
(tätä tuli pienenä katsottua ahkerasti)
</div>

CSS

a.youtube-lazy-link {
  vertical-align:top;
  background:#555;
  width:560px; height:315px;
  background-size:cover;
  text-decoration:none;
  color:#DDD;
  text-align:left;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  display:inline-block;
}
a.youtube-lazy-link:hover {
  text-decoration:none;
  color:#FFF;
}
.youtube-lazy-link-div {
  border:2px solid #000;
  background: url(http://lh4.googleusercontent.com/-QCeB6REIFlE/TuGUlY3N46I/AAAAAAAAAaI/9-urEUtpKcI/s100/youtube-play-button.png) center center no-repeat;
  position:absolute;
}
.youtube-lazy-link-div:hover {
  background: url(http://lh5.googleusercontent.com/-oBFjswrosz4/TuHqainRc3I/AAAAAAAAAbE/t3rMQuSJdLA/s800/youtube-play-button-hover.png) center center no-repeat;
}

JavaScript

//<![CDATA[
// Lazy loading of youtube videos in Blogger by MS-potilas 2011
// See http://yatbt.blogspot.com/
//
// Usage: 
// <a class="youtube-lazy-link" style="width:560px;height:315px;" href="http://www.youtube.com/watch?v=3u8sEaohHMk">Sibelius</a>
// style is optional, if omitted, default width is 560 and height is 315 pixels.
//
$(document).ready(function() {
  $("a.youtube-lazy-link").each(function(index) {
    var embedparms = $(this).attr("href").split("?v=")[1].replace(/\&/,'?');
    var youid = embedparms.split("?")[0];
    if(embedparms.indexOf("showinfo=0") != -1)
      $(this).html('');
    $(this).prepend('<div style="height:'+(parseInt($(this).css("height"))-4)+'px;width:'+(parseInt($(this).css("width"))-4)+'px;" class="youtube-lazy-link-div"></div>&nbsp;')
    $(this).css("background", "#000 url(http://i2.ytimg.com/vi/"+youid+"/0.jpg) center center no-repeat");
    $(this).attr("id", youid);
    $(this).attr("href", $(this).attr("href").split("&")[0]);
    var emu = 'http://www.youtube.com/embed/'+embedparms;
    emu += ((emu.indexOf("?")==-1) ? "?" : "&") + "autoplay=1";
    var videoFrame = '<iframe width="'+parseInt($(this).css("width"))+'" height="'+parseInt($(this).css("height"))+'" style="vertical-align:top;" src="'+emu+'" frameborder="0" allowfullscreen></iframe>';
    $(this).attr("onclick", "$('#"+youid+"').replaceWith('"+videoFrame+"');return false;");
  });
})
//]]>