JSFiddle - React, Tailwind, and code Playground

by kangismet

HTML

<a class="vimeo-link" href="https://vimeo.com/9153533" rel="nofollow">Metallica - Fade to Black</a>

CSS

.vm-box,
.vm-container {
    background: black;
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0;
	height: 0;
	overflow: hidden;
}
.vm-container iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
}
.vm-box .v-thumbs {
    width: 100%;
	height: auto;
    position: relative;
}
.vm-box .vm-title {
    cursor: pointer;
    background: rgba(0,0,0,0.7);
    font:bold 20px Arial,Sans-Serif;
    color: #00adef;
    line-height:35px;
    height:35px;
    overflow:hidden;
    padding:0px 10px;
    text-align: left;
    position: absolute;
    top: 10px;
    left: 10px;
}
.vm-box .vm-title:hover {
    color: #ff5210;
}
.vm-box .vm-share-right {
    background: transparent url('http://2.bp.blogspot.com/-LIzdxbEoLCI/ViZMG3ldCnI/AAAAAAAAHAI/Bw_BUuO4FZY/s1600/vimeo-share.png') no-repeat;
    width: 47px;
    height: 129px;
    position: absolute;
    right: 0;
    top: 5px;
}
.vm-box .vm-play {
  cursor:pointer;
  width:65px;
  height:40px;
  bottom:10px;
  left: 10px;
  margin:-20px 0px 0px 0;
  background:transparent url('http://4.bp.blogspot.com/-qYDgI2UGOh0/ViZYL4AQeGI/AAAAAAAAHAY/NPNmlH4vTHE/s1600/vimeo-play.png') no-repeat top left;
  position: absolute;
}
.vm-box .vm-play:hover {
    background-position:bottom left;
}
.vm-box .vm-bar {
    height: 32px;
    width: calc(100% - 219px);
    position: absolute;
    bottom: 10px;
    left: 95px;
    background: transparent url('http://2.bp.blogspot.com/-vNdJbb99DgI/ViZg1NdfbmI/AAAAAAAAHAs/-ySKxa_GU_Y/s1600/vimeo-bar.png') repeat-x top left;
}
.vm-box .vm-bar:before {
    content: url('http://2.bp.blogspot.com/-BMpSPlX-Wws/ViZg0xpuQGI/AAAAAAAAHAo/HXlrxl_EyUs/s1600/vimeo-bar-left.png');
    width: 11px;
    height: 32px;
    top: 0;
    left: -11px;
    position: absolute;
}
.vm-box .vm-bar:after {
    content: url('http://3.bp.blogspot.com/-ZZFiRodA9oQ/ViZg1CoKUFI/AAAAAAAAHAw/khokPgMvFj8/s1600/vimeo-bar-right.png');
    width: 114px;
    height: 32px;
    top: 0;
    right: -114px;
   ...

JavaScript

// Script by Kang Ismet - blog.kangismet.net
$(function() {
    $('a.vimeo-link').each(function() {
        var vm_url   = this.href,
            vm_id    = vm_url.split('m/')[1],
            vm_title = $(this).text();        
       $(this).replaceWith('<div class="vm-box"><img class="v-thumbs" src=""/><span class="vm-title">' + vm_title + '</span><span class="vm-share-right"></span><span class="vm-play"></span><span class="vm-bar"></span></div>'); 
        $.getJSON('http://www.vimeo.com/api/v2/video/' + vm_id  + '.json?callback=?', {format: "json"}, function(data) {
    
    $(".v-thumbs").attr('src', data[0].thumbnail_large);
        $('div.vm-box').click(function() {
            $(this).replaceWith('<div class="vm-container"><iframe src="https://player.vimeo.com/video/' + vm_id + '?autoplay=1" frameborder="0" allowfullscreen></iframe></div>');
            });
		});
    });
});