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.
If you just copy the embed code from YouTube such as this one:
<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). It is an application of the well-known technique of keeping the aspect ratio with
padding-bottom (Koblentz 2009; see also Coyier 2017).
To this solution, I would add the correction of
height attributes, to remove any letterbox or 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) 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.
To figure out what all those attributes mean, refer to MDN (2021a). 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).
title attribute is for accessibility (MDN 2021a). Replace its value with the description of the embedded video.
By adding a 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: 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.
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), rather than relying on articles written by someone in the past.
Instead of using
Hope this quick note helps you embed YouTube videos smoothly on your website!