Making YouTube embedded videos responsive across different screen sizes

Other Questions YouTube
1

I’m having trouble making my YouTube embeds responsive on my site. When I view the page on different devices or resize the browser window, the video player stays the same fixed size while everything else adjusts properly. This makes the videos look really weird and out of place.

I’ve tried changing the width and height to percentages but that doesn’t work right. The video just resizes based on its parent container which won’t change its height properly.

Here’s my current setup:

<div class="video-container">
<iframe src="https://www.youtube.com/embed/abc123" width="400" height="225"></iframe>
</div>

.video-container {
  margin: 0 auto;
  width: 400px;
  height: 225px;
  box-shadow: 10px 10px 8px rgba(0,0,0,0.6);
}

How can I make this scale properly with the rest of my page layout?

2

yeah i had this same issue last month. the trick is using padding-bottom hack for aspect ratio. remove fixed dimensions from iframe, set container to position relative and iframe to absolute with width/height 100%. works great on mobile too once you get it setup right.

3

To ensure that your YouTube embeds are responsive, utilize the aspect ratio technique alongside CSS positioning. Start by eliminating any fixed width and height from your iframe and container. Apply position: relative to your container and set padding-bottom: 56.25% to maintain the 16:9 aspect ratio. The iframe should then have position: absolute, with properties set to top: 0, left: 0, width: 100%, and height: 100%. I learned this method after encountering similar issues in web projects, and it’s effective for responsive designs.