Video
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 Video 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 Video 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 Video component has the following properties:
| Prop | Required | Description |
|---|---|---|
id | yes | YouTube video ID. |
aspectRatio | no | Override default aspect ratio of 16:9. |
title | no | Override title from YouTube. |
class | no | Additional classes. |
Examples
Default aspect ratio
4:3 aspect ratio
