JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header"><h1>postion: fixed ;</h1></div>

<div class="main">
<iframe width="560" height="345" src="http://www.youtube.com/embed/zlfKdbWwruY" frameborder="0" allowfullscreen></iframe>

<iframe width="420" height="345" src="http://www.youtube.com/embed/bNF_P281Uu4" frameborder="0" allowfullscreen></iframe>
    <iframe width="420" height="345" src="http://www.youtube.com/embed/7WmMcqp670s" frameborder="0" allowfullscreen></iframe>
    <iframe width="560" height="345" src="http://www.youtube.com/embed/w9o5Pw1npAk" frameborder="0" allowfullscreen></iframe>
</div>

CSS

body{width: 590px ;margin: 0 auto ;}
.header{display: block ; height: 150px ; width: 100% ; background: #eee ;z-index: 9999 ;}
h1{ padding: 20px 0 ; color: #000 ;}
.main{margin-top: 220px ;}

JavaScript

$('iframe').each(function(){
      $(this).attr('src',$(this).attr('src')+'?wmode=transparent');
})