About YouTube Fit Cover

About This Component

YouTube Fit Cover allows you to display any YouTube video as a perfectly responsive cover inside your layouts.

Unlike standard embeds, the video automatically adapts to the container using a true fit cover behavior, ensuring a clean, edge-to-edge result with no black bars, regardless of the aspect ratio.

It works seamlessly for hero backgrounds, sections, or custom layouts, and supports both standard YouTube videos and Shorts.

YouTube Behavior

To achieve a true fit cover behavior, the YouTube player is resized beyond its default proportions.

Because of this, YouTube does not display its controls correctly, so the player UI (title, controls, progress bar) is hidden.

The component is designed for immersive background usage, where the video plays as a visual layer rather than an interactive player.

Demo preview

Key Features

Video Input

Supports standard YouTube videos and YouTube Shorts
Automatically detects and adapts aspect ratio (16:9 or 9:16)

Fit & Display

Cover mode fills the container with no black bars
Automatically scales and centers the video
Fit Position lets you control the focal point of the video (top, bottom, left, right, etc.)
Works with any container size or ratio

Playback Behavior

Autoplay enabled
Muted by default (recommended for autoplay)
Optional loop playback
Plays inline for seamless background usage

Poster & Loading

Optional custom poster image
Automatic YouTube thumbnail fallback
Poster delay before video reveal, helping ensure the YouTube player is fully loaded before the video appears
Smooth fade transition between poster and video
Load on page or when entering the viewport

Styling

Adjustable opacity
Custom background fill color
Configurable border radius

Layout Flexibility

Works at any dimension
Perfect for full-width hero backgrounds by placing the component in absolute behind your content
Ideal for sections, cards, or square layouts