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>Link-
https://www.simplystraight.in/videos.html
https://www.simplystraight.in/ions-and-their-types-with-examples-video.html
https://www.simplystraight.in/chemical-bonding-video.html
>Solution :
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/bootstrap@5.0.2/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>