[REVIEW: Verify against live product before announcing.]
When you embed a VideoPlayer.ai video on your own page, the player carries its accessibility behavior with it. Captions, keyboard support, focus indicators, and screen reader announcements work the same as on the share page. There are still a few things you should do as the host page author.
What you get for free
- Keyboard navigation inside the player works as documented in Keyboard navigation.
- Captions can be toggled with the
Ckey or the CC button. - Screen reader announcements behave as in Screen reader support.
- The player has a visible focus indicator that meets WCAG contrast requirements.
What you should do as the host page
| Action | Reason |
|---|---|
| Wrap the iframe with the responsive wrapper | Avoids the player overflowing its container on small screens |
Add a title attribute to the iframe describing the video |
Screen readers announce the iframe by its title |
| Provide a text alternative on the page (transcript or summary) | Users who cannot or prefer not to play the video still get the content |
Avoid autoplay=1 without muted=1 |
Auto-play with sound interrupts assistive tech and most browsers block it anyway |
A good iframe title looks like this:
<iframe
src="https://videoplayer.ai/embed/your-slug"
title="Product walkthrough: setting up your first project"
...
></iframe>
Lite script embed considerations
The lite script embed shows a poster and a play button until the user clicks. The poster element is given an accessible name from the video title. The play button is a real <button> so keyboard users can press Space or Enter to start playback.
Testing your embed
Tab to the iframe. The browser focuses the iframe; one more Tab enters the player. Tab through the player controls; press Space on play. Press C to toggle captions. If any step fails, check that the iframe is not hidden by display: none, that no parent element disables pointer or keyboard events, and that you have not stripped the allow and allowfullscreen attributes.