Make YouTube video embed responsive

Question

I have some videos that are embedded on my webpage from YouTube. The thing is I am using the below-attached code to make it responsive (via bootstrap). It's good on mobile and tablets but on desktops and laptops is coming out to be very huge. When I could not solve the problem then I did not use YouTube embed and switched to the HTML5 video tag. In that, the responsive problem was solved by width:100% and height auto but the videos were not loading and kept on buffering. So, I again switched to YouTube embed so that at least the video loads but it's not really responsive (not on laptops, desktops). Also attaching the link for the webpage where the videos are embedded.

Code-

<div class="container">
  <div class="ratio ratio-16x9">
    <iframe src="https://www.youtube.com/embed/kq7CdSf7ocA?rel=0" title="YouTube video 
      player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
      encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

Answer 1

Remove inline style (width & height) from iframe element then add this css code to your style file:

style.css

.container {
    display: flex;
    justify-content: center;
}
    
iframe {
    aspect-ratio: 16 / 9;
    width: 100% !important;
}

index.html

<div class="container">
    <iframe src="https://www.youtube.com...."></iframe>
</div>

Answer 2

Muh-Osman's solution works like a charm. If you can't use a CSS file and need to put the embed somewhere like in Webflow in my case, this inline solution also solves it!

• You put it into a div
• Remove the width and height
• most important: add style="aspect-ratio: 16 / 9; width: 100% !important;"

<div style="display: flex; justify-content: center;">
  <iframe style="aspect-ratio: 16 / 9; width: 100% !important;" src="https://www.youtube.com/embed/VuaEV2BX5WY" 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></iframe>
</div>