Responsive Google Slides & YouTube Embeds with CSS
![](https://i0.wp.com/chrisyee.ca/wp-content/uploads/2021/11/maik-jonietz-_yMciiStJyY-unsplash-scaled.jpg?fit=2560%2C1707&ssl=1)
Here’s a simple way using only CSS to make your Google Slides & YouTube/Vimeo embeds look great on your website.
The Solution
Add the following CSS to your website.
These CSS selectors will target any iFrame’s with the domains of docs.google.com, youtube.com, and player.vimeo.com and make them responsive with the aspect ratio of 16 / 9.
/* Responsive Google Slides, Google Maps, YouTube & Vimeo */
iframe[src*="docs.google.com"],
iframe[src*="google.com/maps"],
iframe[src*="youtube.com"],
iframe[src*="player.vimeo.com"]{
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
Feel free to adjust the aspect-ratio property to your liking but 16 / 9 should look good for most embeds.
You can also add additional CSS selectors to support any range of domains that you’d like to make responsive.
Here’s an example of how to add support for Twitch embeds:
/* Responsive Google Slides, Google Maps, YouTube , Vimeo, Twitch */
iframe[src*="docs.google.com"],
iframe[src*="google.com/maps"],
iframe[src*="youtube.com"],
iframe[src*="player.vimeo.com"],
iframe[src*="player.twitch.tv"]{
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
Demo
Resize your browser window to see these examples scale to fit your window.
thank you
No problem, glad I could help! 👍
This is beautiful! Thank you for the perfect solution.
Thank you very much for sharing your knowledge, it is very helpful!!