JSFiddle - React, Tailwind, and code Playground

HTML

<div class="embed-container">
  <iframe src="https://www.youtube.com/embed/6i0a7RDPkM8" frameborder="0" allowfullscreen></iframe>  
</div>

CSS

body {
  margin: 5em;
  background: url(https://images.unsplash.com/photo-1564186763535-ebb21ef5277f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80) no-repeat center center/cover;
  position: relative;
}



.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Stuff not needed for demo */
/*, *:before, *:after { box-sizing: border-box; } */
html { height: 100%; }