JSFiddle - React, Tailwind, and code Playground

HTML

<span class="off-light">Выключить свет</span>

<iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/Pdz0n2EqRWY" frameborder="0" allowfullscreen></iframe>


<div class="block-off-light"></div>

CSS

.block-off-light {
 transition: .6s;
 top:0;
 left:0;
 opacity:0;
 width:100%;
 height:100%;
 display:none;
 z-index:301 !important;
 position:absolute !important;
 background:rgba(0,0,0,0.95)
}

iframe.video {
 position: relative;
 z-index: 302;
}

.block-off-light.on {
 opacity:1
}

/* Кнопка */
span{
display: inline-block;
background: #9592c6;
border-radius: 3px;
height: 30px;
line-height: 30px;
margin: 20px 0;
color: #fff;
padding: 0 10px;
cursor: pointer;
}
span:hover{
 background: #000; 
}

JavaScript

$('body').on('click', '.off-light', setOffLight);
$('body').on('click', '.block-off-light', setOnLight);

function setOffLight(){
	$('.block-off-light').show();
	setTimeout(function(){
		$('.block-off-light').addClass('on');
	}, 200);
}

function setOnLight(){
	$('.block-off-light').removeClass('on');
	setTimeout(function(){
		$('.block-off-light').hide();
	}, 600);
}