I’m working on a website project and need help with making video embeds adapt to different screen sizes. Currently I have YouTube and Vimeo videos embedded on my pages but they don’t scale properly on mobile devices or tablets.
When users view the site on smaller screens, the videos either get cut off or create horizontal scrollbars which looks terrible. I’ve tried a few CSS approaches but nothing seems to work consistently across both platforms.
What’s the best way to ensure these embedded videos maintain their aspect ratio while scaling down appropriately for responsive design? Any CSS solutions or wrapper techniques that work reliably for both YouTube and Vimeo embeds would be really helpful.
Container queries work way better than media queries for videos in different layouts. I wrap embeds in a container with container-type: inline-size, then use @container rules to adjust aspect ratios based on actual space, not viewport size. This handles weird cases like videos in sidebars or narrow columns that don’t match normal breakpoints. I add object-fit: contain to prevent stretching and always throw loading="lazy" on iframes - makes a huge difference on mobile where bandwidth actually matters.
The aspect-ratio CSS property beats the old padding-bottom hack hands down. I switched to aspect-ratio: 16 / 9; on my iframe container a year ago and never went back. Just throw width: 100%; height: 100%; on your iframe inside a container with the aspect ratio set - works perfectly for YouTube and Vimeo. The container stays responsive and keeps the right proportions automatically. No more messy percentage calculations, and it’s solid across browsers. Don’t forget max-width: 100% on the container so it doesn’t blow past its parent on bigger screens.
the flexbox wrapper method works great if you need broader browser support. wrap ur iframe in a div with position: relative; padding-bottom: 56.25%; height: 0; then set the iframe to position: absolute; top: 0; left: 0; width: 100%; height: 100%; - that 56.25% gives you the 16:9 ratio. i’ve been using this for yrs without any issues on both platforms.