JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container">

<div class="video-wrapper-absolute">
   <div class="video-wrapper">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/C2VjWtMbrzQ?version=3&loop=1&playlist=C2VjWtMbrzQ&autoplay=1&showinfo=0&vq1080" frameborder="0" allowfullscreen></iframe>
   </div>
</div>

  <div class="coupon"> 
    <div class="button">GET COUPON</div>
    <div class="amount" style="display:none;">25% OFF</div>
  </div> 
  
</div>

CSS

.container { position:relative; width:100%; height:200px; overflow:hidden; }


.video-wrapper-absolute { position:absolute; top:0; left:0; right:0; bottom:0; }
.video-wrapper { position:relative; padding-bottom:56.25%; height:0; }
.video-wrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

#ytplayer { width:100%; height:100%; z-index:-1; }

.coupon { background:orange; margin-top:158px; float:left; position:relative; }
.button { padding:6px; text-align:center; font-weight:bold; cursor:pointer; }
.amount { background:purple; color:#fff; padding:6px; text-align:center; }





/* do you think clearfix will do the work? 
.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

JavaScript

$(function(){

	$('.button').click(function(){
  	$('.amount').fadeToggle();
  });

});