JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Simple fade-in/fade-out example</h3>

<input id="myBtn" type="button" value="Fade Out" onclick="fade(this);" />
<iframe id="mainFrame" width="300" height="400" frameborder="0" src="http://www.youtube.com/embed/rT_OmTMwvZI?wmode=opaque" allowfullscreen></iframe>

CSS

.fade-out {
         opacity:0;
         background-color: rgba(255, 255, 255, 0);
     }
     .fade-in {
         opacity:1;
         background-color: rgba(255, 255, 255, 1);
     }
     #myBtn {
         width:80px;
     }
     /* Style for image */
     #mainFrame {
         -webkit-transition: opacity 0.5s ease-in;
         -moz-transition: opacity 0.5s ease-in;
         -o-transition: opacity 0.5s ease-in;
     }

JavaScript

function fade(btnElement) {
     if (btnElement.value === "Fade Out") {
         document.getElementById("mainFrame").className = "fade-out";
         btnElement.value = "Fade In";
     } else {
         document.getElementById("mainFrame").className = "fade-in";
         btnElement.value = "Fade Out";
     }
 }