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
Responsive Layout Tools
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!

<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 Projects" 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="Using Kits in Your Projects" 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 Kits in Your Projects" 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 Projects" 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="Using Kits in Your Projects" 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 Kits in Your Projects" 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>

Navigating Programmatically

Link to This Section

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

  
  Previous
  First
  Next

<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 Projects" 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="Using Kits in Your Projects" 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 Kits in Your Projects" 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>

<div style="margin-top: 1rem;" class="wa-cluster wa-gap-xs">
  <wa-button onclick="document.getElementById('demo-playlist').previous()">Previous</wa-button>
  <wa-button onclick="document.getElementById('demo-playlist').goTo(0)">First</wa-button>
  <wa-button onclick="document.getElementById('demo-playlist').next()">Next</wa-button>
</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 Projects" 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="Using Kits in Your Projects" 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 Kits in Your Projects" 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>

<div id="event-log" style="margin-top: 1rem; font-size: 0.875rem; 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>

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
`base`	The component's base wrapper.	`::part(base)`
`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)`

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

Getting Started

Resources

Theming & Utilities

Components

Data Visualization ProData Visualization components require access to Web Awesome Pro

Form Controls

Utility Components

Legal Stuff

Web Awesome

Video Playlist

Examples

Controls Preset

Navigating Programmatically

Listening for Changes

Importing

Slots

Attributes & Properties

Methods

Events

CSS parts

Dependencies

Quick Links

Recent Searches

Getting Started

Resources

Theming & Utilities

Components

Data Visualization ProData Visualization components require access to Web Awesome Pro

Form Controls

Utility Components

Legal Stuff

Web Awesome

Web Awesome Elsewhere

Video Playlist

Examples

Controls Preset

Navigating Programmatically

Listening for Changes

Importing

Slots

Attributes & Properties

Methods

Events

CSS parts

Dependencies

Quick Links

Recent Searches

We Have Cookies…