$('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" style="background-image:url(http://img.youtube.com/vi/' + yt_id + '/0.jpg);"><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('<iframe class="youtube-frame" src="http://www.youtube.com/embed/' + yt_id + '?autoplay=1"></iframe>');
});
});
body {
background-color:#bbb;
padding:50px;
}
.youtube-box,
.youtube-frame {
display:block;
width:420px; /* Lebar video */
height:315px; /* Tinggi video */
background-color:black;
background-size:100%;
position:relative;
border:none;
margin:0px auto 15px;
}
.youtube-box span {
display:block;
position:absolute;
top:0px;
right:0px;
bottom:0px;
left:0px;
}
.youtube-box .youtube-title {
background-color:rgba(0,0,0,0.4);
font:bold 15px Verdana,Arial,Sans-Serif;
color:white;
text-shadow:0px 1px 2px black;
bottom:auto;
line-height:30px;
height:30px;
overflow:hidden;
padding:0px 15px;
}
.youtube-box .youtube-bar {
background:black url('http://4.bp.blogspot.com/-7keKvgPlMUA/T7vJpi3X_YI/AAAAAAAACtw/4OUd7uHadDk/s1600/yt-bar-center.png') repeat-x top;
height:35px;
top:auto;
}
.youtube-box .youtube-bar .yt-bar-left {
background:transparent url('http://4.bp.blogspot.com/-WL_y2cwe57k/T7xHS3C8tTI/AAAAAAAACug/xIqhenfa-4o/s1600/yt-bar-left.png') no-repeat top left;
z-index:4;
cursor:pointer;
}
.youtube-box .youtube-bar .yt-bar-right {
background:transparent url('http://1.bp.blogspot.com/-DCNevn4jQx0/T7vJt3X3pjI/AAAAAAAACuA/uIKxoT3685M/s1600/yt-bar-right.png') no-repeat top right;
}
.youtube-box .youtube-play {
cursor:pointer;
width:83px;
height:56px;
top:50%;
left:50%;
margin:-28px 0px 0px -42px;
background:transparent url('http://1.bp.blogspot.com/-JVqaIffy7Ws/T7vK4-ya81I/AAAAAAAACuI/UCL8Y7G4DqE/s1600/yt-play.png') no-repeat top left;
}
.youtube-box .youtube-play:hover {
background-position:bottom left;
}
<a class="youtube-link" href="http://www.youtube.com/watch?v=-joKveiaabA">Contoh Video</a>
<a class="youtube-link" href="http://www.youtube.com/watch?v=zHozf-gv3D0">Spongebob Squarepants - Boom BOOM POW</a>
<a class="youtube-link" href="http://www.youtube.com/watch?v=l9jiNzL6DN4">SpongeBob SquarePants - Season 1 - Episode 4 - Bubblestand</a>