Many websites we see contain video content. This is almost always achieved through embedded YouTube videos, because it is far easier to have YouTube host and play your videos than having to store all that content locally.

Recently, it has become more common to have several embedded videos on a single webpage. In some cases, we see rows and rows of videos on a page. Although this seems like a good idea to keep all the related videos on a single page, it can result in the page taking some time to load, and also affects the accessibility of your site.

It is easy to embed a YouTube video in your website. You just copy the embed code from YouTube for your video. The code uses an HTML "iframe".

One annoyance is that the YouTube code contains a "frameborder" attribute which is not supported in HTML5. However, this is unlikely to impact anyone's actual site experience, and anyway the attribute can easily be removed. Where things become more problematic is when you embed more than one YouTube video in a page. Each YouTube iframe has a "Watch on youtube.com" link and WCAG 2.1 success criteria 2.4.9 requires that link text identifies the purpose of each link - but now we have multiple links to different videos and they all contain the same link text.

So how do we fix this?

There's not much anyone except YouTube themselves can do to fix these issues directly, so site owners need to look for ways to work around the problem. One good way to improve things is to use "lazy-loading". This means to defer loading the video iframe unless and until the user actually decides to watch it. There are various site plugins available to help achieve this.

There are so many reasons that lazy-loading YouTube videos is a good idea. Loading and starting up the YouTube video player takes a lot of time and computer memory - especially if this is happening multiple times on a single page. Lazy-loading makes it much faster to load the page, and is much better for user privacy. It is incredibly wasteful preparing an entire video player when many visitors to a page won't even click on the embedded videos.

Using a plugin may be a good idea in general anyway, because otherwise, the site is forcing browsers to load multiple video players every time the page is loaded, even though the videos aren't even visible until the visitors clicks on the right buttons to make that section of the page appear.

We see lots our clients use a variety of plugins to help them with this video issue and one we think works quite well is Lite YouTube Embed. When we tested it with Sitemorse, Lighthouse, Axe, AAAtraq, and the W3C Validator, and it passes all of their checks. Not only that, the lazy-loaded content displays hundreds of times faster than a standard embedded video.

One final point regarding accessibility is that videos are, of course, inherently problematic for anyone who can't see them clearly or easily hear the audio content. As a minimum you should make sure to use YouTube's features that allow you to check and edit the captions / subtitles for your videos to ensure they are accurate and complete.