Responsive Google Slides & YouTube Embeds with CSS

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.

Google Slides

Google Maps

YouTube

Vimeo