JSFiddle - React, Tailwind, and code Playground

HTML

<div class="video-container" >
     <div class="video-foreground">
       <iframe
               src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ&mute=1"
               frameBorder="0" allowFullScreen>
                
    </iframe>
  </div>             
 </div>

CSS

.video-container{
  width:100vw;
  height:100vh;
  overflow:hidden;
  position:relative;
}


.video-container iframe,{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-container iframe, {
  pointer-events: none;
}
.video-container iframe{
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  height: calc(100% + 120px);
}
.video-foreground{
  pointer-events:none;
}