JSFiddle - React, Tailwind, and code Playground

HTML

<div class="get-i-fraUpdateme">
    <a href="#">
        <img src="http://jsfiddle.net/img/logo.png" onClick="document.getElementById('i_frame').style.display='table-cell';
        document.getElementById('my_i_frame').src ='http://www.youtube.com/embed/WYgJ72jZrsM';" alt="" />
     </a>
</div>
<div>
    жмите на картинку
</div>
<div id="i_frame">
    <iframe width="640" height="360" src="" frameborder="0" allowfullscreen id="my_i_frame" align="absmiddle"></iframe>
    <div id="closed" onClick="document.getElementById('i_frame').style.display='none';
         document.getElementById('my_i_frame').src ='';">Скрыть</div>
</div>

CSS

html,body{height: 100%;}


#i_frame {display: none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
position: fixed;
background: rgba(000,000,000,0.2);
}

#closed {margin: 0px auto;
background: grey;
padding: 10px;
border-radius: 5px;
width: 100px;
color: blue;
text-align: center;
font-style: italic;
position: absolute;
top: 10px;
right: 10px;}

#closed:hover {
color: red;
cursor: pointer;

}
#my_i_frame {position: relative;
margin-top: -180px;
margin-left: -320px;
top: 50%;
left: 50%;
}

JavaScript

function show_me(){
    document.getElementById('i_frame').style.display='table-cell';
    }