JSFiddle - React, Tailwind, and code Playground

HTML

<a class="youtube-link" href="https://www.youtube.com/watch?v=C3lWwBslWqg" rel="nofollow">Sting - Desert Rose</a>

CSS

.youtube-box {
  text-align: center;
  background-color: black;
  width: 640px;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.youtube-frame {
  background-color: black;
  width: 640px;
  height: auto;
  max-width: 100%;
  text-align: center;
  margin: 0 auto;
}

.youtube-img {
  position: relative;
  height: 100%;
  width: 100%;
  margin-top: -9%;
  margin-bottom: -6.5%;
}

.youtube-box span {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.youtube-box .youtube-title {
  background: rgba(0, 0, 0, 0.8) url('http://1.bp.blogspot.com/-ze_gKSnerlA/ViPuOuMMusI/AAAAAAAAG-c/Ns4pWvZf7pY/s1600/yt-share.png') no-repeat 98% 50%;
  font: normal 15px Arial, Sans-Serif;
  color: white;
  text-shadow: 0px 1px 2px black;
  bottom: auto;
  line-height: 30px;
  height: 30px;
  overflow: hidden;
  padding: 0px 15px;
  text-align: left;
}

.youtube-box .youtube-bar {
  background: transparent url('http://3.bp.blogspot.com/-o8HY37eBNbQ/ViPoT-1sxrI/AAAAAAAAG98/21Pl3p4SM8g/s1600/y-bar.png') repeat-x bottom;
  height: 40px;
  top: auto;
}

.youtube-box .youtube-bar .yt-bar-left {
  background: transparent url('http://3.bp.blogspot.com/-RakJ6TgJy_Y/ViPoT7J9RuI/AAAAAAAAG90/Hf7hSVmQRTE/s1600/y-bar-left.png') no-repeat bottom left;
  z-index: 4;
  cursor: pointer;
}

.youtube-box .youtube-bar .yt-bar-right {
  background: transparent url('http://2.bp.blogspot.com/-Lj994bfXIjo/ViPoTyjT_QI/AAAAAAAAG94/aJBWjy8WMgE/s1600/y-bar-right.png') no-repeat bottom right;
}

.youtube-box .youtube-play {
  cursor: pointer;
  width: 74px;
  height: 52px;
  top: 50%;
  left: 50%;
  margin: -26px 0px 0px -40px;
  background: transparent url('http://4.bp.blogspot.com/-Vj3xOT3Jiis/ViPsv-_82rI/AAAAAAAAG-Q/3jc6mgYR5f4/s1600/yt-play-new.png') no-repeat top left;
}

.youtube-box .youtube-play:hover {
  background-position: bottom left;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top:...

JavaScript

// Original Script by DTE :]
// Optimized and Modified by Kang Ismet
$(function() {
  $('a.youtube-link').each(function() {
    var yt_url = this.href,
      yt_id = yt_url.split('?v=')[1],
      yt_title = $(this).text();
    $(this).replaceWith('<div class="youtube-box"><img class="youtube-img" src="http://img.youtube.com/vi/' + yt_id + '/0.jpg" alt="youtube" ></img><span class="youtube-title">' + yt_title + '</span><span class="youtube-bar"><span class="yt-bar-left"></span><span class="yt-bar-right"></span></span><span class="youtube-play"></span></div>');
    $('div.youtube-box').click(function() {
      $(this).replaceWith('<div class="youtube-frame"><div class="videoWrapper"><iframe src="http://www.youtube.com/embed/' + yt_id + '?autoplay=1" frameborder="0" allowfullscreen></iframe></div></div>');
    });
  });
});