YouTube embed, WCAG compliant
Last updated: 9 March 2022
What to think of when you embed YouTube videos into your website.
- Add the title attribute into the iframe element. Describe in a few words the content of the video. (SC 4.1.2)
- Add subtitles, if there is spoken words or important sound effects in the video (SC 1.2.2)
- Add audio description, if necessary (SC 1.2.3, SC 1.2.5)
- Use enough contrast for text in the video (SC 1.4.3)
- Disable keyboard short cuts. Change YouTube's default disablekb=0 to 1 (SC 2.1.4)
src="https://www.youtube.com/watch?v=XXXXXXXXXX&disablekb=1"
or (depending if there are no parameters yet)src="https://www.youtube.com/embed/_XXXXXXXXXX?disablekb=1"
- Do not use autoplay. Keep it to YouTube's default: autoplay=0
- Show controls. Keep it to YouTube's default: controls=1 (in case of autoplay SC 1.4.2)
- Keep full screen option available. Keep it to YouTube's default: fs=1
- Keep the YouTube logo, so the user can easily watch the video on YouTube or in the YouTube app. Keep it to YouTube's default: modestbranding=0
Language
- For multi language websites you add a subtitle for every used language to the video. You can add the parameter cc_lang_pref with the language of the page. Example: cc_lang_pref=nl
- Set the language of the interface to the language of the webpage. Example: hl=nl
Background: when you open a Dutch website in a browser with an English interface, the embedded YouTube will automatically choose the browsers interface language instead of the language of the website. That will make it harder for Dutch people to control the video.
