JSFiddle - React, Tailwind, and code Playground

by kangismet

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;
    margin-top: 5px;
    width: 640px;
    max-width: 100%;
    margin: 20px 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: -10%;
    margin-bottom: -7%;
}
.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...

JavaScript

// Original Script by Taufiq Nurahman
// Optimized and Edited 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>');
        });
    });
});