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, YouTube & Vimeo */
iframe[src*="docs.google.com"],
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 on how to add support for Twitch embeds:

/* Responsive Google Slides, YouTube , Vimeo, Twitch */
iframe[src*="docs.google.com"],
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

YouTube

Vimeo