JSFiddle - React, Tailwind, and code Playground

HTML

<h2>
manual
</h2>
<div class="video-container">
   <div class="video-player" data-id="Cv_2mp3X868"></div>
</div>

<h2>
youtube embed
</h2>
<p><iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/Cv_2mp3X868" width="560"></iframe></p>

<h2>
vimeo
</h2>
<p><iframe allowfullscreen="" frameborder="0" height="360" mozallowfullscreen="" src="https://player.vimeo.com/video/136583720" webkitallowfullscreen="" width="640"></iframe></p>

SCSS

/* ==========================================================================
Social Videos
========================================================================== */

.video-container { 
	display: block; 
	margin: 20px auto; 
	width: 100%; 
	max-width: 600px;

	.video-player { 
		display: block; 
		width: 100%; /* assuming that the video has a 16:9 ratio */ 
		padding-bottom: 56.25%; 
		overflow: hidden; 
		position: relative; 
		width: 100%; 
		height: 100%; 
		cursor: hand; 
		cursor: pointer; 
		display: block; 

		img.youtube-thumb { 
			bottom: 0; 
			display: block; 
			left: 0; 
			margin: auto; 
			max-width: 100%; 
			width: 100%; 
			position: absolute; 
			right: 0; 
			top: 0; 
			height: auto
		}
		div.play-button { 
			height: 72px; 
			width: 72px; 
			left: 50%; 
			top: 50%; 
			margin-left: -36px; 
			margin-top: -36px; 
			position: absolute; 
			background: url("http://i.imgur.com/TxzC70f.png") no-repeat; 
		}
		
	}
	.youtube-iframe { 
		width: 100%; 
		height: 100%; 
		position: absolute; 
		top: 0; 
		left: 0; 
	}
}

JavaScript

(function() {
    $.each($('.video-player'), function() {
        $(this).append(videoThumbYT($(this).data('id')));
        $(this).on('click', videoIframeYT);
    });
    
    $.each($('iframe[src*="youtube.com"]'), function() {
        var player = $('<div class="video-player">');
        var id = $(this).attr('src');
        id = id.substr(id.lastIndexOf("/")+1);
        player.attr('data-id', id);
        player.html(videoThumbYT(id));
        player.on('click', videoIframeYT);
        
        var videoContainer = $('<div class="video-container">');
        videoContainer.append(player);
        $(this).replaceWith(videoContainer);
    });

    $.each($('iframe[src*="vimeo.com"]'), function() {
        var player = $('<div class="video-player">');
        var id = $(this).attr('src');
        id = id.substr(id.lastIndexOf("/")+1);
        player.attr('data-id', id);
        videoThumbV(id, function(str) {
        	player.html(str);
        });
        player.on('click', videoIframeV);
        
        var videoContainer = $('<div class="video-container">');
        videoContainer.append(player);
        $(this).replaceWith(videoContainer);
    });

})();
 
function videoThumbYT(id) {
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/maxresdefault.jpg"><div class="play-button"></div>';
}
 
function videoIframeYT() {
    var iframe = $('<iframe>');
    iframe.attr("src", "//www.youtube.com/embed/" + $(this).attr('data-id') + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
    iframe.attr("frameborder", "0");
    iframe.addClass("youtube-iframe");
    $(this).empty();
    $(this).append(iframe);
}

function videoThumbV(id, callback) {
    $.ajax({
        type:'GET',
        url: '//vimeo.com/api/v2/video/' + id + '.json',
        jsonp: 'callback',
        dataType: 'jsonp',
        success: function(data){
            var thumbnail_src = data[0].thumbnail_large;
            callback('<img...