Making embedded YouTube videos (1) responsive, (2) accessible, and (3) less YouTube-looking
Tags: html, css, iframe, youtube
Published: 2021-05-18 08:09:00

Today I've learned how to embed a YouTube video on web pages that I'm designing so that it is responsive, accessible, and as little YouTube-looking as possible.

As always with web development, relevant pieces of information are scattered around on the web. Let me put everything together here for future reference.

## Make it responsive

If you just copy the embed code from YouTube such as this one:

```html
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VQaoRnDjZMw"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>
```

its width won't change according to the screen width.

A quick solution (in the context of React) is provided by [bravemaster619 (2020)](https://dev.to/bravemaster619/simplest-way-to-embed-a-youtube-video-in-your-react-app-3bk2). It is an application of the well-known technique of keeping the aspect ratio with `padding-bottom` ([Koblentz 2009](https://alistapart.com/article/creating-intrinsic-ratios-for-video/); see also [Coyier 2017](https://css-tricks.com/aspect-ratio-boxes/#use-case-video)).

To this solution, I would add the correction of `width` and `height` attributes, to remove any [letterbox](https://en.wikipedia.org/wiki/Letterboxing_(filming)) or [pillarbox](https://en.wikipedia.org/wiki/Pillarbox) frames around the video. The pair of values provided by YouTube may not reflect the actual aspect ratio of the video, especially if the video is an old one with the aspect ratio 4:3. With MacOS, you can measure the original video screen width and height with screen capture: pressing cmd + shift + 5 ([Apple 2021](https://support.apple.com/guide/mac-help/take-a-screenshot-or-screen-recording-mh26782/mac)) and drag the box that shows the width and height values.

In the above example, the actual video size is 640 x 480. By using this pair of values, the black columns on both sides disappear.

## Revise the `iframe` attributes

To figure out what all those attributes mean, refer to [MDN (2021a)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attributes). But don't follow its advice that we replace the deprecated attribute of `frameborder` with the use of CSS to control the width of borders. Removing `frameborder` attribute will draw a rather thick border around the embedded video. Keep it as it is.

To understand the attribute value of `allow`, see [MDN (2021b)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy#directives).

The `title` attribute is for accessibility ([MDN 2021a](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#accessibility_concerns)). Replace its value with the description of the embedded video.

## Customize the appearance of YouTube video player

[Google Developers (2021)](https://developers.google.com/youtube/player_parameters) provides how to embed YouTube videos on web pages (in case you forgot as I did, Google owns YouTube since 2006: [NBC News 2006](https://www.nbcnews.com/id/wbna15196982)).

By adding a [query string](https://en.wikipedia.org/wiki/Query_string) to the end of the video URL, you can customize the appearance of YouTube video player up to some extent. I would go with this:

```
?fs=0&modestbranding=1&playsinline=1&rel=0
```

- `fs=0`: hides the fullscreen button.
- `modestbranding=1`: hides YouTube's logo.
- `playsinline=1`: prevents iOS from playing the video full-screen.
- `rel=0`: shows the related videos only from the same channel (i.e. the YouTube user who uploaded the video to be embedded) when the video ends or when the user stops the video. By default, YouTube will show the videos related to the user's recent video-watching behaviour, which may be completely irrelevant to the content of your website.

In addition, `control=0` will hide the progress bar and the stop button while playing the video. But this is not recommended as the user is likely to have no clue how to stop the video. I don't think many people know the answer is to press the Space key (or you can add this instruction below the embedded video).

That's the best we can do to make the embedded video look less like part of YouTube. We cannot remove the video title to be shown: the `showinfo` parameter was deprecated in 2018.

The definition of these and other parameters has been quite frequently changed in the past. Always refer to the latest edition of [Google Developers (2021)](https://developers.google.com/youtube/player_parameters), rather than relying on articles written by someone in the past.

## JavaScript solutions

Instead of using `<iframe>`, you can use JavaScript to embed YouTube videos. [Google Developers (2021)](https://developers.google.com/youtube/player_parameters#IFrame_Player_API) and [Agarwal (2020)](https://www.labnol.org/internet/light-youtube-embeds/27941/) show how. The latter claims it reduces the amount of data downloaded before playing the video. If the speed of loading your website is a real concern, it may be worth checking it out. 

I myself didn't try, because I'd rather not use JavaScript if HTML/CSS alone can do the job.

---

Hope this quick note helps you embed YouTube videos smoothly on your website!