JSFiddle - React, Tailwind, and code Playground

HTML

<select class="video" id="url" onchange="changeSrc(this, document.getElementById('myframe'));">
  <optgroup label="Выбор эп."></optgroup>
</select>
<iframe class="video" id="myframe" width="700" height="394" src="//video.sibnet.ru/shell.php?videoid=2668933" style="border:0;" scrolling="no" allowfullscreen></iframe>

<br><br>

<button class="switch">turn off light</button>
(to turn on light - click somewhere)

<div id='persoff'></div>

CSS

.video {
position:relative;
z-index:102;
}
#persoff {
background:#000;
opacity:0.9;
filter:alpha(opacity=90);
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
z-index:100;
}

JavaScript

var
  urls = {
    '01 эп.':'//video.sibnet.ru/shell.php?videoid=2668933&autoplay=1',
    '02 эп.':'//video.sibnet.ru/shell.php?videoid=2668979&autoplay=1',
    '03 эп.':'//video.sibnet.ru/shell.php?videoid=2668991&autoplay=1',
    '04 эп.':'//video.sibnet.ru/shell.php?videoid=2669005&autoplay=1'
  },
  select = document.getElementById('url'),
  opt,
  k;

for (k in urls) {
  opt = document.createElement('option');
  opt.value = urls[k];
  opt.innerHTML = k;
  select.appendChild(opt);
}

function changeSrc(input, el) {
  el.src = input.value;
}
var per = 0;
$(document).ready(function(){
  $("#persoff").css("height", $(document).height()).hide();
  $(document).click(function(e) {
	if(!$(e.target).hasClass('switch') && per == 1) {
	  $("#persoff").toggle();
	  per = 0;
	}
  });
  $(".switch").click(function(){
    $("#persoff").toggle();
	per += 1;
    if (per == 2) {
	  per = 0;
	}
  });
});