Components

Video

A component to embed video content from any source that supports iframe embedding.

Usage

Embed videos from any source that supports iframe embedding.

YouTube and Vimeo URLs are automatically converted to their embed format, so you can paste a share link directly. For other providers, pass in a valid embed URL.

You can add a poster image to show a thumbnail before playback, adjust the aspect ratio, and customize the appearance with component props.

::video
---
src: "https://www.youtube.com/watch?v=1NSwNjzbCSs"
poster: "/images/examples/video-poster-kongair.png"
play-button: true
aspect-ratio: "16:9"
title: "Kong Developer Portal Demo"
border-radius: "6px"
width: "100%"
padding: "0"
margin: "0"
---
::
Video Component Props

The video embed URL to display in the iframe.

URL of a poster/thumbnail image displayed before the video plays.

Whether to show a play button overlay on the poster image. Defaults to true when a poster is present.

The aspect ratio of the video player.

The title attribute for the iframe (accessibility).

The border radius of the element. Accepts string | null.

The width of the element. Accepts string | null.

The padding of the component. Accepts string | null.

The margin of the component. Accepts string | null.

Props

src

The URL of the video to embed. YouTube and Vimeo URLs are automatically converted to their embed format, so you can use any of the following:

  • YouTube: youtube.com/watch?v=ID, youtu.be/ID, youtube.com/shorts/ID, youtube.com/live/ID, or youtube.com/embed/ID
  • Vimeo: vimeo.com/ID or player.vimeo.com/video/ID
  • Other providers: Pass a valid iframe embed URL directly
  • Type: string
  • Default: ''
  • Required: true

poster

The full URL of a poster/thumbnail image displayed before the video plays. Clicking the poster starts the video.

  • Type: string
  • Default: ''

playButton

Whether to show a play button overlay on the poster image to indicate the content is playable. Defaults to true when poster is set for better user experience, but can be disabled if desired.

  • Type: boolean
  • Default: true

aspectRatio

The aspect ratio of the video player.

  • Type: '16:9' | '4:3' | '1:1' | '21:9'
  • Default: 16:9
::video
---
aspect-ratio: "4:3"
src: "https://www.youtube.com/watch?v=1NSwNjzbCSs"
title: "Aspect Ratio Demo"
border-radius: "6px"
width: "100%"
max-width: "100%"
padding: "0"
margin: "0"
---
::
Video Component Props

The aspect ratio of the video player.

title

The title attribute for the iframe, used for accessibility.

  • Type: string
  • Default: ''

Shared Props

This component also includes the shared props listed below:

  • border - default is var(--kui-border-width-10, 1px) solid var(--kui-color-border, #e0e4ea)
  • borderRadius - default is var(--kui-border-radius-30, 6px)
  • margin - default is var(--kui-space-0, 0)
  • maxWidth - default is 100%
  • padding - default is var(--kui-space-0, 0)
  • width - default is 100%
  • styles - default is ''

See here for more information on shared props.