VideoPlayer
A responsive YouTube video component that displays a thumbnail until clicked.
The component displays a thumbnail image with a play button overlay. When clicked, the thumbnail is replaced with a YouTube iframe that autoplays the video. In an ideal world, the player would be loaded only when the user clicks the custom play button. But then autoplay does not work reliably on iOS.
Each VideoPlayer component instance will load and initialize a YouTube iframe immediately when it
is mounted, even if the video is never played. This can have performance implications if you use
multiple VideoPlayer components on a single page, as each will load a separate iframe and
associated resources. When the user clicks the play button, the already initialized player is shown
and the video starts playing.
Props
A VideoPlayer component has the following properties:
| Prop | Required | Description |
|---|---|---|
value | yes | Video object from a content collection. |
class | no | Additional classes. |
Examples
16:9 aspect ratio
4:3 aspect ratio
Timestamps
When the Video object includes a timestamps array, the component renders clickable buttons below
the player. Each button shows the mm:ss timestamp and its label. Clicking a button seeks to that
position and starts playing.
