Embed responsive YouTube videos in 2024

Using the aspect-ratio property

Create a class and use the aspect-ratio property to automatically set the width and height of your video based on its container:

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

In your HTML, apply the class you created (.video, in my case) to your iframe:

<iframe
  class="video"
  src="https://www.youtube.com/embed/msizPweg3kE"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope;"
  allowfullscreen></iframe>

And that's it! No need for fancy tricks anymore.