JSFiddle - React, Tailwind, and code Playground

HTML

<a href="http://www.youtube.com/watch?v=_oEA18Y8gM0" data-video="_oEA18Y8gM0" class="youtube-video" target='_blank'></a>

CSS

span.youtube-thumbnail {
	position:absolute;
	top:0;
	left:0;
	opacity:0.75;
	height:315px;
	width:460px;
}

JavaScript

$(document).ready(function() {
	$('a.youtube-video').each(function() {
		var videoId = $(this).attr('data-video');
		var videoThumbnail = "http://img.youtube.com/vi/" + videoId + "/0.jpg";
        
		var videoBackground = $('<span class="youtube-thumbnail"></span>');
        
        var url = "http://www.youtube.com/watch?v=" + videoId;

        $(this).attr('href', url);
        $(this).attr('title', "Click to play video");
        
		videoBackground.css({
			background:"#000 url('"+videoThumbnail+"') no-repeat"
		})

		$(this).css({
			height:315,
			width:460,
			position:"relative",
			display:"block",
			textAlign:"center",
			color:"#fff",
			fontSize:26
		});
        
        $(this).text('Click to load video');
		$(this).append(videoBackground);
	})

	$('a.youtube-video').click(function(e) {

//        debugger;
        var isCtrlPressed = e.ctrlKey || e.metaKey;
        if (isCtrlPressed == true){
            return;
        } 


		e.preventDefault();
		var videoId = $(this).attr('data-video');
		var videoThumbnail = "http://img.youtube.com/vi/" + videoId + "/0.jpg";
		var videoEmbed = $('<object width="560" height="315" type="movie" data="http://www.youtube.com/v/' + videoId + '?version=3&amp;hl=en_US&amp;rel=0"><param name="movie" value="http://www.youtube.com/v/'+ videoId + '?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/'+ videoId + '?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>');        
	    $(this).parent().append(videoEmbed);
		$(this).hide();
	})
})