{"id":38193,"date":"2025-08-18T07:00:00","date_gmt":"2025-08-18T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=38193"},"modified":"2025-08-18T09:54:49","modified_gmt":"2025-08-18T16:54:49","slug":"player-settings-customize-accessibility","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/player-settings-customize-accessibility","title":{"rendered":"What Player Settings Should You Customize for Accessibility?"},"content":{"rendered":"\n

Many teams assume their video players are accessible by default. However, most don\u2019t meet Web Content Accessibility Guidelines<\/a> (WCAG) 2.1 AA or European Accessibility Act<\/a> (EAA) standards, especially when it comes to screen reader support, keyboard navigation, and flexible captions.<\/p>\n\n\n\n

With these regulations already in effect, reviewing and configuring player settings is now a compliance requirement for any platform delivering video to a broad audience.<\/p>\n\n\n\n

In this guide, we\u2019ll walk through the player settings that are most critical for accessibility, how to configure them, and how to test your changes to make sure they work for everyone.<\/p>\n\n\n\n

How to Customize Your Video Player for Accessibility<\/h2>\n\n\n\n

To make your videos accessible, you\u2019ll need to adjust a few key player settings, such as captions, keyboard controls, and screen reader support. We\u2019ll make those updates using Cloudinary Video Player<\/a>, a lightweight, customizable HTML5 player built for optimized, accessible video playback across devices. <\/p>\n\n\n

\n
\"Cloudinary
Cloudinary Video Player<\/figcaption><\/figure><\/div>\n\n\n

It supports adaptive streaming, branding controls, and full WCAG 2.1 AA compliance, making it compatible with screen readers, keyboard navigation, and other assistive tools.<\/p>\n\n\n\n

You can embed the player<\/a> via HTML or configure it with JavaScript. Either way, you’ll need a Cloudinary account<\/a> and at least one uploaded video. Each video gets a unique public ID, which is how the player knows what to load.<\/p>\n\n\n\n

Here\u2019s a quick example showing how to load a video into the player using JavaScript:<\/p>\n\n\n

const<\/span> player = cloudinary.videoPlayer('my-player'<\/span>, {\n\n\u00a0 cloudName<\/span>: 'your-cloud-name'<\/span>\n\n});\n\nplayer.source('demo-video'<\/span>); \/\/ 'demo-video' is the public ID of the uploaded video<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
Note:<\/strong> 
Note: To use cloudinary.videoPlayer, include the Cloudinary Video Player library via CDN<\/a> or NPM<\/a>. See the documentation for setup instructions<\/a>.<\/p>\n<\/div>\n\n\n
In the example above, your-cloud-name<\/code> is your Cloudinary cloud name, demo-video<\/code> is the public ID of the uploaded video, and my-player<\/code> is the ID of the <video><\/code> element.<\/p>\n\n\n\n
If you prefer not to write code, you can use Cloudinary\u2019s Video Player Studio<\/a>, a visual tool for configuring captions, subtitles, themes, and chapters. To access it, go to the Video<\/strong> section in your Cloudinary dashboard and click on Video Player Studio<\/strong> from the sidebar.<\/p>\n\n\n\n
\"The
Cloudinary Video Player Studio<\/figcaption><\/figure>\n\n\n\n
Now that you understand what the Cloudinary Video Player is and how to load a video, let\u2019s look at the specific settings you should customize to make your video player accessible, starting with captions and subtitles.<\/p>\n\n\n\n
1. Captions and Subtitles<\/h2>\n\n\n\n
Captions and subtitles<\/a> are essential to improve video accessibility. Captions support users who are deaf or hard of hearing, as well as anyone watching in a sound-off environment, which is common on mobile and social platforms. Subtitles, by contrast, translate speech when viewers don\u2019t understand the spoken language.<\/p>\n\n\n\n
According to WCAG 2.1<\/a>, all prerecorded video content must include captions that accurately reflect spoken dialogue and relevant sounds like music or speaker changes. Captions must also be customizable and available in multiple languages, where applicable.<\/p>\n\n\n\n
Cloudinary allows you to define captions using <\/a>textTracks<\/a>.<\/a> You can use either manually uploaded .vtt files or automatically generated .transcript files. Here\u2019s a basic example:<\/p>\n\n\n
player.source('marketing-video'<\/span>, {\n\n\u00a0 textTracks: {\n\n\u00a0 \u00a0 captions: {\n\n\u00a0 \u00a0 \u00a0 label: 'English (Captions)'<\/span>,\n\n\u00a0 \u00a0 \u00a0 default<\/span>: true<\/span>,\n\n\u00a0 \u00a0 \u00a0 url: 'https:\/\/res.cloudinary.com\/demo\/raw\/upload\/marketing-video.en.vtt'<\/span>\n\n\u00a0 \u00a0 },\n\n\u00a0 \u00a0 subtitles: [\n\n\u00a0 \u00a0 \u00a0 {\n\n\u00a0 \u00a0 \u00a0 \u00a0 label: 'Spanish'<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 language: 'es'<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 url: 'https:\/\/res.cloudinary.com\/demo\/raw\/upload\/marketing-video.es.vtt'<\/span>\n\n\u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 {\n\n\u00a0 \u00a0 \u00a0 \u00a0 label: 'French'<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 language: 'fr'<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 url: 'https:\/\/res.cloudinary.com\/demo\/raw\/upload\/marketing-video.fr.vtt'<\/span>\n\n\u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 ]\n\n\u00a0 }\n\n});<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
This setup makes sure that English captions load by default, users can toggle between Spanish and French subtitles in the player, and each track is properly labeled and accessible in the UI.<\/p>\n\n\n\n
You can also do this in the Player Studio by adding the language and its file:<\/p>\n\n\n\n
\"The
Add and manage subtitles for multiple languages directly in the Player Studio interface<\/figcaption><\/figure>\n\n\n\n
If you want to automate transcript and subtitle creation, Cloudinary integrates add-ons like the Google AI Video Transcription add-on<\/a> or the Microsoft Azure Video Indexer add-on<\/a>. This allows you to generate and translate subtitles during upload using the raw_convert<\/code> parameter:<\/p>\n\n\n
<code<\/span>><\/span>raw_convert: 'azure_video_indexer:vtt:en-US:es-ES'<\/code<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
This would generate VTT subtitles in both English and Spanish and store them alongside your video asset.<\/p>\n\n\n\n
2. Keyboard Navigation and Screen Reader Support<\/h2>\n\n\n\n
To be considered accessible under WCAG 2.1 AA, a video player must be fully operable without the use of a mouse. <\/p>\n\n\n\n
This includes being able to play, pause, adjust volume, toggle captions, and enter full screen mode using only a keyboard. Screen reader support is also critical, as elements must expose proper roles and labels so assistive technologies can interpret them accurately.<\/p>\n\n\n\n
In Cloudinary\u2019s Video Player, keyboard and screen reader<\/a> support is already built in, but you should confirm the following:<\/p>\n\n\n\n