JSFiddle - React, Tailwind, and code Playground

by George Cristian

HTML

<body>
	<button data-idvideo="1" class="showVideo">Video 1</button>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua.</p>
	<div id="v1" class="vWrapper">
		<div class="vInner">
			<div class="vClose"><button class="closeVideo">x</button></div>
			<div class="video"><iframe style="width:100%;height:100%;" src="http://www.youtube.com/embed/xvDTAHJy3r4" frameborder="0"></iframe></div>
		</div>
	</div>
</body>

CSS

body {
			background-color:green;
		}
		.vWrapper {
			position:absolute;
			top:0;bottom:0;right:0;left:0;
			max-height:100%;
			max-width:100%;
			border:20px solid rgba(255, 255, 255, 0.5); /* modifici transparenta inlocuind .5 cu o valoare intre 0 si 1 */
			display: none;
		}

		.vInner {
			width:100%;
			height:100%;
			background-color: red;
		}

		.vClose{
			padding-top:10px;
			padding-right:10px;
			position: absolute;
			right:0;
			border:0 none;
		}

		.video {
			width:100%;
			height:100%;
			float:left;
		}

JavaScript

$(document).ready(function(){
	$(".showVideo").on("click", function(){
		var idVideo = $(this).data("idvideo");
		$("#v" + idVideo).fadeIn();
	})
	$(".closeVideo").on("click", function(){
		$(this).parents().find(".vWrapper").fadeOut();
	})
});