diff --git a/apps/docs/content/components/VideoPlayer.mdx b/apps/docs/content/components/VideoPlayer.mdx
index 4cdc08ea8..986a9fa24 100644
--- a/apps/docs/content/components/VideoPlayer.mdx
+++ b/apps/docs/content/components/VideoPlayer.mdx
@@ -6,6 +6,7 @@ description: Use the video player component to enable playback of self-hosted vi
---
import {Label} from '@primer/react'
+import {Link, Stack, VideoPlayer} from '@primer/react-brand'
```js
import {VideoPlayer} from '@primer/react-brand'
@@ -22,6 +23,27 @@ import {VideoPlayer} from '@primer/react-brand'
```
+## With Audio Description
+
+Videos with important visual information must include an audio description to ensure that the content is accessible to all users.
+
+The audio description can be provided as part of the existing soundtrack, or via a link to an alternate audio-described version.
+
+```jsx live
+
+
+
+
+
+
+
+ Watch with audio description
+
+
+
+
+```
+
## With poster
```jsx live
@@ -106,7 +128,7 @@ import {VideoPlayer} from '@primer/react-brand'
```jsx live
}
+ playIcon={() => }
>
{
- const MyVideoPlayer = () => {
- const {isPlaying, togglePlaying, seek} = useVideo()
-
- return (
-
-
-
-
-
-
-
-
-
-
-
- )
- }
+```javascript live noinline
+const CustomVideoPlayer = () => {
+ const {isPlaying, togglePlaying, seek} = useVideo()
return (
-
-
-
+
+
+
+
+
+
+
+
+
+
+
)
}
+
+const App = () => (
+
+
+
+)
+
+render()
```
## useVideo Context