JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container" >
    <div class="wrapper">
      <div class="main"/>
    </div>
</div>

CSS

.container {
          width: 100%;
          height: 100%;
          background-color: red;
          position: absolute;
        }
        
        
        .wrapper {
  width: 100%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translate(0%, -50%);
}
.wrapper:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: deepskyblue;
  /* let's see it! */
  color: white;
}