How to Create a Responsive Full-Width iframe with a Fixed Aspect Ratio

Creating a responsive iframe with 100% width that maintains its aspect ratio while you resize the browser has historically been a bit problematic. However, using CSS and divs in conjunction with an iframe, you can achieve a responsive full-width iframe with a fixed aspect ratio by structuring your HTML code, as seen in the example below.

<div>
     <div style="position:relative;padding-top:56.25%;">
          <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/UFXfmgQm_D4?t=571" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="ASP.NET Core MVC &amp; Razor Pages in .NET 6"></iframe>
     </div>
</div>