iFrame aspect ratio adjuster with javascript

It will automatically adjust the iFrame height:

<iframe width="100%" height="315" src="https://www.youtube.com/embed/RAYFCTEp7pU?si=tI7CJgqLvF91Ybdd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Use the following JavaScript code:

<script>
// Find all iframe elements with the class "video-container" and adjust their aspect ratio
const iframes = document.querySelectorAll('iframe');

iframes.forEach(iframe => {
  const aspectRatio = 560 / 315; // Set your desired aspect ratio here (e.g., 560/315 for 16:9)

  // Update the iframe's height to maintain the aspect ratio
  iframe.style.height = `${iframe.offsetWidth / aspectRatio}px`;
});
</script>

Tailwind CSS + Nextjs

<div className="relative w-full pb-[56.25%] h-0">
  <iframe
    className="absolute top-0 left-0 w-full h-full"
    src="https://www.youtube.com/embed/JYgZaXCTEZU?si=EvaB-TTr7v3Jpwl_"
    title="YouTube video player"
    frameBorder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerPolicy="strict-origin-when-cross-origin"
    allowFullScreen
  />
</div>