diff --git a/apps/docs/content/components/VideoPlayer.mdx b/apps/docs/content/components/VideoPlayer.mdx
index 0ad94dfbe..4cdc08ea8 100644
--- a/apps/docs/content/components/VideoPlayer.mdx
+++ b/apps/docs/content/components/VideoPlayer.mdx
@@ -17,7 +17,7 @@ import {VideoPlayer} from '@primer/react-brand'
```jsx live
-
+
```
@@ -29,7 +29,7 @@ import {VideoPlayer} from '@primer/react-brand'
poster="/brand/assets/example-poster.png"
title="GitHub media player"
>
-
+
```
@@ -38,7 +38,7 @@ import {VideoPlayer} from '@primer/react-brand'
```jsx live
-
+
```
@@ -47,7 +47,7 @@ import {VideoPlayer} from '@primer/react-brand'
```jsx live
-
+
```
@@ -64,7 +64,10 @@ import {VideoPlayer} from '@primer/react-brand'
showVolumeControl={false}
showFullScreenButton={false}
>
-
+
```
@@ -73,7 +76,10 @@ import {VideoPlayer} from '@primer/react-brand'
```jsx live
-
+
```
@@ -87,7 +93,10 @@ import {VideoPlayer} from '@primer/react-brand'
showBranding={false}
showControlsWhenPaused={false}
>
-
+
```
@@ -99,7 +108,10 @@ import {VideoPlayer} from '@primer/react-brand'
title="GitHub media player"
playIcon={() => }
>
-
+
```
@@ -111,7 +123,7 @@ The `VideoPlayer` component exposes a `useVideo` hook that can be used to contro
Full documentation for the `useVideo` hook can be found [below](#usevideo-context).
```tsx live
-() => {
+;() => {
const MyVideoPlayer = () => {
const {isPlaying, togglePlaying, seek} = useVideo()
@@ -127,7 +139,7 @@ Full documentation for the `useVideo` hook can be found [below](#usevideo-contex
showFullScreenButton={false}
>