Components

YouTube Video Player

Engage Visually. Load Smart.

The YouTube Video component enables you to embed fully featured YouTube videos or playlists, prioritizing performance, responsiveness, and customization. It’s designed to give you complete control over playback behavior and user experience, without sacrificing load speed or visual integration.

From lazy loading to custom playlists, autoplay, loop, and channel-restricted related videos, everything is built to keep your content engaging, fast, and tailored to your audience. Whether it’s a hero video, testimonial reel, or full playlist, this is the most innovative way to embed YouTube.

Smart Performance Features

  1. Lazy Loading.
    Only loads the player when needed.

  2. Fits perfectly on any screen.
    No extra code or styling needed.

  3. Above the Fold Optimization.
    Boost performance without affecting UX.

Maximum control for every use case

  1. Build your own or link a playlist.
    Define what your users see and hear.

  2. Autoplay, Loop & Mute.
    Create ambient or dynamic effects.

  3. Limit suggestions to your channel.
    Keep viewers on your content.

Use Cases

Use the YouTube Video component to embed video content into your project with full flexibility:

• Marketing & explainer videos in landing pages

• Tutorial or documentation series

• Embedded testimonials and case studies

• YouTube playlists for campaigns or showcases

• Full-page hero videos or background elements

This component ensures your video content is not just embedded—it’s optimized for visibility, user experience, and speed.

Configuration Options & Features

The YouTube Video component delivers rich, responsive, and intelligently embedded video experiences. With performance tuning, advanced playback behavior, and intuitive controls, you keep your video content light, fast, and impactful—exactly how modern websites demand.

Smart playback. Strong performance. Seamless embedding.

Video

Select the primary video to play in the player.

This video will also define the preview thumbnail used before the player is loaded.

Recommended even if a playlist is set, ensures proper placeholder preview.

Existing Playlist

Reference to a public YouTube playlist, overriding custom playlists, and the player will only show videos included in the specified playlist.

Custom Playlist

Manually add YouTube video references to create a custom sequence. These videos will play consecutively, in the order defined here.

Controls

Choose whether to show or hide player controls (play, pause, timeline, etc.).

Autoplay

Enable autoplay so the video starts playing immediately once it is loaded and visible.

Autoplayed videos are muted by default due to browser restrictions.

Loop

Enable looping to repeat the video or playlist indefinitely.

  • For single videos: repeats the same video

  • For playlists: loops the full sequence

Mute

Start the video muted by default, which can be useful for background videos or when using autoplay.

Limit Related Videos to Channel

Limit YouTube’s suggested videos at the end or when pausing to those from the same channel only.

Requires an existing playlist to identify the channel.

Above the Fold

Specify whether the video appears above the fold on your page. Helps optimize when and how the player is loaded to improve performance.

Load

Choose what event should trigger the player to load:

  • On Click – Loads when the user clicks a preview

  • On Hover – Loads on mouse hover

  • On Visible – Loads when scrolled into view

Component Theme

Apply a design theme to the video container for consistent styling, layout integration, and visual control.