Youtube Embed
Description
The Youtube Embed component allows you to easily embed YouTube videos into your Storyblok-powered website. It provides a customizable interface with options for autoplay, controls, and width settings. The component displays a thumbnail preview with a play button, which transforms into the actual video embed when clicked.
Installation
bash
sabaccui add youtubeEmbed
Usage
Here's an example of how to use the Youtube Embed component in a Storyblok block:
Preview
Schema
| Field | Type | Description | Default |
|---|---|---|---|
url | text | The YouTube video URL. Must be a valid YouTube URL. | Required |
autoplay | boolean | Determines if the video should autoplay when embedded. | false |
controls | boolean | Determines if video controls should be displayed. | true |
width | option | Sets the width of the video. Options: fullWidth | null |
Related Components
None specified.
Notes
- The component uses a regex pattern to validate the YouTube URL format.
- It fetches the video thumbnail and title using the YouTube oEmbed API.
- The component implements a lazy-loading strategy for the iframe, only loading it when the play button is clicked. Thus reducing initial page load times and complying with cookie consent policies.
Best practices:
- Ensure the YouTube URL is correct and accessible.
- Use the
fullWidthoption for responsive layouts. - Be mindful of content restrictions and copyright when embedding videos.