'Make YouTube video embed responsive

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>
htmlcsstwitter-bootstrapiframebootstrap-5


Solution 1:[1]

You can try setting a max-width on the iframe.

-- Video not loading in snippet ... Fiddle

.container {
  display: flex;
  justify-content: center;
}

iframe {
  max-width: 900px;
  max-height: 400px;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions