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:
<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 width and 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.
Revise the iframe attributes
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).
The title attribute is for accessibility (MDN 2021a). Replace its value with the description of the embedded video.
Customize the appearance of YouTube video player
Google Developers (2021) provides how to embed YouTube videos on web pages (in case you forgot as I did, Google owns YouTube since 2006: NBC News 2006).
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&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), 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) and Agarwal (2020) 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!
Oldest comments (1)
Anyway to completely disable related video?