JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript">
        
            jQuery(window).load(function() {
                                
                var btn1=jQuery('#btn1');
                
              
    
       jQuery('#holder').css('opacity', 0);
     
     
     
     
                btn1.bind('click', function(){
                         
    
                    jQuery('#holder').animate({opacity: 1 }, { duration: 3000 });
                
                
                });
                
                
            });
        
        </script>

<div id="holder">
     
        <iframe id="player" type="text/html" width="320" height="240"
  src="http://www.youtube.com/embed/u1zgFlCw8Aw?wmode=transparent?enablejsapi=1"
  frameborder="0"></iframe>

   </div>
      
      <div id="btn1"></div>

CSS

#holder{
    position:absolute;
    width:320px;
    height:240px;
    top:0px;
    left:0px;

  
    
}

#btn1{
    position:absolute;
    background:#09C;
    width:40px;
    height:40px;
    top:250px;
    left:0px;
      
}