JSFiddle - React, Tailwind, and code Playground

HTML

<div class="auto-resizable-iframe">
  <div>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/EDwb9jOVRtU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

CSS

.auto-resizable-iframe {
  max-width: 560px;
  margin: 0px auto;
}

.auto-resizable-iframe > div {
  position: relative;
  padding-bottom: 75%;
  height: 0px;
}

.auto-resizable-iframe iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}