JSFiddle - React, Tailwind, and code Playground

HTML

<div id="youtube">
<iframe width="300" height="225" src="http://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</div>
    
<div id="blur"></div>
<div id="red"></div>

CSS

#blur {
    background: black;
    width: 100%;
    height: 100%;
    position: absolute;
    z-inxed: 800;
    top: 0;
    left: 0;
    
    opacity:0.8;
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
}

#youtube, #youtube * {
    opacity:0.2;
    z-index: -1000;
}

#red {
    height: 50px;
    width: 50px;
    background: red;
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
}