<main>
  <h3>16:9 (1:0.5625)</h3>
  <div class="static-ratio" id="ratio_16-9">
    <iframe src="https://www.youtube-nocookie.com/embed/9FH3-dj5MZk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

  <h3>4:3 (1:0.75)</h3>
  <div class="static-ratio" id="ratio_4-3">
    <iframe src="https://www.youtube-nocookie.com/embed/VpmmfJaL-5g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</main>

* {
  box-sizing: border-box;
}

main {
  width: 100vw;
  max-width: 500px;
  margin: auto;
}

.static-ratio {
  position: relative;
  overflow: hidden;
}
.static-ratio:before {
  content: '';
  display: block;
  width: 100%;
}
.static-ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



#ratio_16-9:before {
  padding-top: 56.25%;
}


#ratio_4-3:before {
  padding-top: 75%;
}