Next YouTube Player

Overview

This component allows you to embed YouTube videos directly into your projects. It uses lite-youtube-embed to improve performance by loading the YouTube player only when users interact with the video. The component is fully customizable, giving you control over the video’s dimensions, parameters, and styles.

How to Use

Adding the Component

1. Drag and drop the YouTubeEmbed component onto your canvas or add it to your component tree.
2. Configure the properties through the properties panel to adjust the video’s appearance and functionality.

Properties

You can customize the behavior and style of the YouTube embed using the following properties:

Property	Type	Description
videoid	Required	The unique YouTube video ID.
width	Optional	The width of the video container. Defaults to auto.
height	Optional	The height of the video container. Defaults to auto.
playlabel	Optional	A visually hidden label for the play button, improving accessibility.
params	Optional	Parameters for the YouTube player (e.g., "controls=0&start=10&end=30"). Passed as a query string.
style	Optional	Custom CSS styles for the video container.

Performance Considerations

The YouTubeEmbed component is optimized using lite-youtube-embed. This means the full YouTube player only loads when the user interacts with the video, keeping your project’s initial load times fast and reducing the impact on performance.