> ## Documentation Index
> Fetch the complete documentation index at: https://docs.quick.bot/llms.txt
> Use this file to discover all available pages before exploring further.

# Video

export const YoutubeVideo = ({id}) => <div style={{
  position: 'relative',
  paddingBottom: '64.63195691202873%',
  height: 0
}}>
    <iframe src={`https://www.youtube.com/embed/${id}`} allowFullScreen style={{
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  borderRadius: '8px'
}}></iframe>
  </div>;

The Video agent block allows you to display videos from multiple sources to your users. It supports
direct video files (MP4) and automatic embedding from popular video platforms like YouTube, Vimeo,
TikTok, and more.

<Frame style={{ maxWidth: '400px' }}>
  <img src="https://mintcdn.com/urbiport-eca888d8/IABytB49wvquMLKH/images/builder/blocks/agent/video.png?fit=max&auto=format&n=IABytB49wvquMLKH&q=85&s=8eabc2eebb9fd3bd73c5e3e8445534b5" alt="Video bubble" className="rounded-lg" width="1480" height="734" data-path="images/builder/blocks/agent/video.png" />
</Frame>

Paste any supported video URL. The system automatically detects the video service and configures
proper embedding.

## Supported Video Services

* **YouTube**: Regular videos and Shorts (automatic URL parsing and iframe embedding)
* **Vimeo**: Professional video hosting with clean player interface
* **TikTok**: Social media videos with custom embed player (300px height)
* **Gumlet**: Video hosting and optimization platform
* **OneDrive**: Microsoft cloud-hosted videos
* **MP4**: Direct video file URLs with HTML5 video player
* **Customizable Controls**: Toggle video controls visibility
* **Variable Support**: Use variables for dynamic video URLs

## Video Configuration

* **Controls Display**: Show or hide video playback controls for direct video files
* **Aspect Ratio**: Configurable video dimensions and sizing
* **Max Width**: Control maximum display width for optimal viewing
* **Auto-sizing**: Automatic size suggestions based on video type
* Use variables in video URLs for dynamic content

## Unsupported Content

* **YouTube Clips**: Not supported due to embed URL restrictions
* **Age-restricted videos**: May not embed properly due to platform restrictions

<Tip>
  If a video service is not supported, use the [Embed block](/builder/editor/blocks/agent/embed) instead.
</Tip>

For video services not in the supported list: