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="Creating a Font Awesome Kit"
  poster="/assets/images/fa-part-1.jpg"
></wa-video>

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

<wa-video title="Creating a Font Awesome Kit" 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

Use the controls attribute to choose which playback controls appear. Switch presets below to compare them.

<div class="video-controls-demo">
  <wa-video controls="standard" title="Using Kits in Your Project" 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>

  <wa-divider></wa-divider>

  <wa-radio-group label="Controls" value="standard" orientation="horizontal">
    <wa-radio appearance="button" value="standard">standard</wa-radio>
    <wa-radio appearance="button" value="full">full</wa-radio>
    <wa-radio appearance="button" value="none">none</wa-radio>
  </wa-radio-group>
</div>

<script>
  const demo = document.querySelector('.video-controls-demo');
  const video = demo.querySelector('wa-video');
  const radioGroup = demo.querySelector('wa-radio-group');

  radioGroup.addEventListener('change', () => {
    video.controls = radioGroup.value;
  });
</script>

Poster Image

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 Teams" 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 & Subtitles

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

<wa-video controls="standard" title="Creating a Font Awesome Kit" 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

Every control's icon has a slot — poster-icon, play-icon, pause-icon, volume-icon, mute-icon, fullscreen-icon, and exit-fullscreen-icon — so you can supply your own. This example swaps the poster, play, and pause icons.

<wa-video title="Using Teams" poster="/assets/images/teams.jpg" controls="full">
  <wa-icon slot="poster-icon" name="film"></wa-icon>
  <wa-icon slot="play-icon" name="circle-play"></wa-icon>
  <wa-icon slot="pause-icon" name="circle-pause"></wa-icon>
  <source
    src="https://uploads.webawesome.com/Doing%20More%20with%20FA%20Ep.%202%20'Using%20Teams'.mp4"
    type="video/mp4"
  />
</wa-video>

Playlists

Group a series of related videos into <wa-video-playlist> to play them in sequence with built-in navigation.

Video Recommendations

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

Video Encoding

Poster Images

Caption Files

API

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>