WordPress adds support for video captions and subtitles

The release of WordPress 5.6 contained several accessibility improvements, including the ability to add captions and subtitles to videos using the Web Video Text Tracks Format (WebVTT).

WordPress has been focusing on making its CMS more accessible for editors and site visitors. In the latest version, WordPress 5.6 “Simone,” they made the newest theme, Twenty Twenty-One, its most accessible theme ever.

…this default theme puts accessibility at the heart of your website. It conforms to the WordPress accessibility-ready guidelines and addresses several more specialized standards from the Web Content Accessibility Guidelines (WCAG) 2.1 at level AAA. It will help you meet the highest level of international accessibility standards when you create accessible content and choose plugins which are accessible too!

Josepha Haden, WordPress 5.6 “Simone”

In addition to the theme update, they made it possible to add captions and subtitles to videos. When you use the Video block in the Gutenberg editor it now has an option to add a Web Video Text Tracks Format (WebVTT) file.

Adding WebVTT file to WordPress
Adding WebVTT file to WordPress Video block

WebVTT files are plain-text documents that use the (soon to be) W3C specification for marking up external text track resources in connection with the HTML <track> element. WebVTT code isn’t complex and is somewhat similar to how video segments work. However, instead of specifying clips with start times and descriptions, WebVTT specifies a range of time along with the text that should appear as a caption or subtitle during that timeframe.

WebVTT code example
Example of WebFTT code

Here’s an example of a video and WebVTT file I added to WordPress using the updated Video block. When you play the CleanMyMac review video, turning on captions will display the text contained within the .vtt file.

CleanMyMac review video with support for closed captions

While it makes sense to upload the .vtt file to WordPress, I don’t recommend uploading videos. Even the best WordPress hosting providers aren’t optimized for streaming large videos. Instead, I recommend you upload it to a CDN like Backblaze B2.

Alternatively, you may want to consider skipping the WordPress Video block altogether and use Cloudflare Stream. Cloudflare Stream supports the .vtt format and can be used in WordPress by using the Custom HTML block.

Cloudflare Stream WebVTT support

How to create WebVTT files

The best way to create WebVTT files is to use a transcription service like Rev. Rev provides a closed captioning service that will transcribe the audio from videos into .vtt files, and is the service Coywolf uses.

Rev closed captions

Rev also supports several other caption and subtitle formats, which can be helpful if you want to embed them into the video.

Caption file formats supported by Rev


Related News

Jon is the founder of Coywolf and the EIC and the primary author reporting for Coywolf News. He is an industry veteran with over 25 years of digital marketing and internet technologies experience. Follow @henshaw