Video Playlist

<wa-video-playlist>

Pro

Included with Web Awesome Pro

Experimental

Video playlists wrap multiple <wa-video> elements into a playlist with navigation controls.

Get Video Playlist with Web Awesome Pro!

Subscribing to Web Awesome Pro gives you every Pro component, plus premium themes, color tools, team collaboration, and more.

Pro Components
Native Styles
CSS + Layout Utilities
Ever-Growing Pattern Library
Unlimited Hosted Projects
Pre-Built Pro Themes
Pro Theme Builder
Pro Color Tools
Official Figma Design Kit
WA Pro Perpetual License
Actual Human™ Support

Get Web Awesome Pro + Video Playlist!

Already have Pro? Log in

<wa-video-playlist>
  <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" />
    <track
      src="https://uploads.webawesome.com/01-create-your-first-kit.vtt"
      kind="subtitles"
      srclang="en"
      label="English"
    />
  </wa-video>

  <wa-video 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-video title="Downloading Kits" 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>
  <wa-video title="Using Teams" poster="/assets/images/teams.jpg">
    <source
      src="https://uploads.webawesome.com/Doing%20More%20with%20FA%20Ep.%202%20'Using%20Teams'.mp4"
      type="video/mp4"
    />
  </wa-video>
</wa-video-playlist>

Examples

Link to This Section

Controls Preset

Link to This Section

Use the controls attribute to set the controls preset for all videos in the playlist. Accepts the same values as <wa-video>: none, standard, or full (default).

<wa-video-playlist controls="standard">
  <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" />
    <track
      src="https://uploads.webawesome.com/01-create-your-first-kit.vtt"
      kind="subtitles"
      srclang="en"
      label="English"
    />
  </wa-video>

  <wa-video 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-video-playlist>

Navigating Programmatically

Link to This Section

Use the next(), previous(), and goTo(index) methods to navigate between videos programmatically.

    
    First
    Previous
    Next

<div>
  <wa-video-playlist id="demo-playlist">
    <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" />
      <track
        src="https://uploads.webawesome.com/01-create-your-first-kit.vtt"
        kind="subtitles"
        srclang="en"
        label="English"
      />
    </wa-video>

    <wa-video 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-video title="Downloading Kits" 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>
    <wa-video title="Using Teams" poster="/assets/images/teams.jpg">
      <source
        src="https://uploads.webawesome.com/Doing%20More%20with%20FA%20Ep.%202%20'Using%20Teams'.mp4"
        type="video/mp4"
      />
    </wa-video>
  </wa-video-playlist>

  <wa-divider></wa-divider>

  <div class="wa-cluster">
    <wa-button appearance="filled" onclick="document.getElementById('demo-playlist').goTo(0)">First</wa-button>
    <wa-button appearance="filled" onclick="document.getElementById('demo-playlist').previous()">Previous</wa-button>
    <wa-button appearance="filled" onclick="document.getElementById('demo-playlist').next()">Next</wa-button>
  </div>
</div>

Listening for Changes

Link to This Section

The wa-video-change event fires when the active video changes, providing the previous index, current index, and the incoming video's metadata.

No change yet.

<wa-video-playlist id="event-playlist">
  <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" />
    <track
      src="https://uploads.webawesome.com/01-create-your-first-kit.vtt"
      kind="subtitles"
      srclang="en"
      label="English"
    />
  </wa-video>

  <wa-video 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-video-playlist>

<div
  id="event-log"
  style="margin-block-start: var(--wa-space-m); font-size: var(--wa-font-size-s); color: var(--wa-color-text-quiet);"
>
  No change yet.
</div>

<script>
  const playlist = document.getElementById('event-playlist');
  const log = document.getElementById('event-log');

  playlist.addEventListener('wa-video-change', event => {
    log.textContent = `Changed from index ${event.detail.previousIndex} → ${event.detail.currentIndex}: "${event.detail.video.title}"`;
  });
</script>

API

Link to This Section

Importing

Link to This Section

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.

CDN

npm

Self-Hosted

React

Import this component directly from the CDN:

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

After installing Web Awesome via npm, import this component:

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

If you're self-hosting Web Awesome, import this component from your server:

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

To import this component for React 18 or below, use the following code:

import WaVideoPlaylist from '@awesome.me/webawesome/dist/react/video-playlist/index.js';

Slots

Link to This Section

Learn more about using slots.

Name	Description
(default)	The default slot. Place `<wa-video>` elements to create a playlist.

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`controls` `controls`	The controls preset forwarded to each child `<wa-video>`. Type `'none' \| 'standard' \| 'full'` Default `'full'`
`iconLibrary` `icon-library`	Icon library used for placeholder icons. Type `string` Default `'system'`

Methods

Link to This Section

Learn more about methods.

Name	Description	Arguments
`goTo()`	Jumps to the video at the given index.	`index: number`
`next()`	Plays the next video in the playlist.
`previous()`	Plays the previous video in the playlist.

Events

Link to This Section

Learn more about events.

Name	Description
`wa-video-change`	Emitted when the active video changes.

CSS Parts

Link to This Section

Learn more about CSS parts.

Name	Description	CSS selector
`playlist`	The playlist sidebar container.	`::part(playlist)`
`playlist-duration`	The duration text within a playlist item.	`::part(playlist-duration)`
`playlist-item`	An individual playlist item button.	`::part(playlist-item)`
`playlist-thumbnail`	The thumbnail image within a playlist item.	`::part(playlist-thumbnail)`
`playlist-title`	The title text within a playlist item.	`::part(playlist-title)`
`video-playlist`	The component's outer wrapper.	`::part(video-playlist)`
`base`	Deprecated. Use the `video-playlist` part instead.	`::part(base)`

Dependencies

Link to This Section

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

Need a hand?

Report a bug

Ask for help

Video Playlist

Examples

Controls Preset

Navigating Programmatically

Listening for Changes

API

Importing

Slots

Attributes & Properties

Methods

Events

CSS Parts

Dependencies

Quick Links

Recent Searches

Video Playlist

Examples

Controls Preset

Navigating Programmatically

Listening for Changes

API

Importing

Slots

Attributes & Properties

Methods

Events

CSS Parts

Dependencies

Quick Links

Recent Searches

We Have Cookies…