Video

Videos are used to embed and play video content with custom controls and captions.

<wa-video title="Web Awesome" controls="full">
  <source src="https://uploads.webawesome.com/waks_compressed.mp4" type="video/mp4" />
</wa-video>

Examples

Adding Video Sources

The simplest way to add a video is with the src attribute.

<wa-video
  src="https://uploads.webawesome.com/01-create-your-first-kit.mp4"
  title="Using Kits in Your Project"
  poster="/assets/images/fa-part-1.jpg"
></wa-video>

For multiple formats or additional options, use <source> elements instead.

<wa-video title="Using Kits in Your Project" poster="/assets/images/fa-part-1.jpg">
  <source src="https://uploads.webawesome.com/01-create-your-first-kit.mp4" type="video/mp4" />
  <source src="https://uploads.webawesome.com/01-create-your-first-kit.ogv" type="video/ogg" />
  <source src="https://uploads.webawesome.com/01-create-your-first-kit.webm" type="video/webm" />
</wa-video>

Controls

The video player offers three control presets: none, standard, and full.

None

No controls are displayed. The video can still be played programmatically via JavaScript, and the poster overlay and captions remain visible.

<wa-video controls="none" title="My Video" poster="/assets/images/kits.jpg">
  <source
    src="https://uploads.webawesome.com/Doing%20More%20with%20FA%20Ep.%203%20'Downloading%20Kits'.mp4"
    type="video/mp4"
  />
</wa-video>

Standard

Displays playback, a seekable timeline, elapsed/total time, volume, captions, and fullscreen controls.

<wa-video controls="standard" title="My Video" poster="/assets/images/fa-part-2.jpg">
  <source src="https://uploads.webawesome.com/02-using-kits-in-your-project.mp4" type="video/mp4" />
  <track
    src="https://uploads.webawesome.com/02-using-kits-in-your-project.vtt"
    kind="subtitles"
    srclang="en"
    label="English"
  />
</wa-video>

Full

Includes everything in standard, plus playback speed selection and picture-in-picture.

<wa-video controls="full" title="My Video" poster="/assets/images/fa-part-1.jpg">
  <source src="https://uploads.webawesome.com/01-create-your-first-kit.mp4" type="video/mp4" />
  <track
    src="https://uploads.webawesome.com/01-create-your-first-kit.vtt"
    kind="subtitles"
    srclang="en"
    label="English"
  />
</wa-video>

Poster Images

Add a poster image that displays before the video plays. If no poster is provided, no overlay is shown and the browser will display the first frame of the video instead.

<wa-video title="Using Kits in Your Project" poster="/assets/images/teams.jpg" controls="full">
  <source
    src="https://uploads.webawesome.com/Doing%20More%20with%20FA%20Ep.%202%20'Using%20Teams'.mp4"
    type="video/mp4"
  />
</wa-video>

Captions and Subtitles

Add a <track> element to enable captions using standard WebVTT files.

<wa-video controls="standard" title="Using Kits in Your Project" poster="/assets/images/fa-part-1.jpg">
  <source src="https://uploads.webawesome.com/01-create-your-first-kit.mp4" type="video/mp4" />
  <track
    src="https://uploads.webawesome.com/01-create-your-first-kit.vtt"
    kind="subtitles"
    srclang="en"
    label="English"
  />
</wa-video>

Captions are rendered above the video controls and automatically adjust position when controls show or hide.

Icon Slots

Several slots like poster-icon and pause-icon are provided to let you customize which icons you'd like to show.

<wa-video title="Using Kits in Your Project" poster="/assets/images/teams.jpg" controls="full">
  <wa-icon slot="poster-icon" name="kiwi-bird" family="duotone" variant="solid"></wa-icon>
  <wa-icon slot="play-icon" name="fish" family="duotone" variant="solid"></wa-icon>
  <wa-icon slot="pause-icon" name="fish-bones" family="duotone" variant="solid"></wa-icon>
  <source
    src="https://uploads.webawesome.com/Doing%20More%20with%20FA%20Ep.%202%20'Using%20Teams'.mp4"
    type="video/mp4"
  />
</wa-video>

Playlists

To group multiple videos into a playlist, use <wa-video-playlist>.

Video Recommendations

Recommended to ensure fast loading, broad browser compatibility, and the best playback experience across devices.

Video Encoding

Poster Images

Caption Files

Importing

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

import 'https://ka-f.webawesome.com/[email protected]/components/video/video.js';

import '@awesome.me/webawesome/dist/components/video/video.js';

import './webawesome/dist/components/video/video.js';

import WaVideo from '@awesome.me/webawesome/dist/react/video/index.js';

Slots

Learn more about using slots.

Attributes & Properties

Learn more about attributes and properties.

Methods

Learn more about methods.

Events

Learn more about events.

CSS custom properties

Learn more about CSS custom properties.

CSS parts

Learn more about CSS parts.

Dependencies

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

• <wa-button>
• <wa-dropdown>
• <wa-dropdown-item>
• <wa-icon>
• <wa-popover>
• <wa-popup>
• <wa-slider>
• <wa-spinner>
• <wa-tooltip>