Inline player

Play HTML5, YouTube and Vimeo media with Plyr, a small accessible player styled with Tabler colors.

Overview

The inline player is Plyr, a small media player for HTML5 video and audio, YouTube and Vimeo. It draws its own controls, which Tabler styles to match the rest of the UI, and it's keyboard accessible out of the box.

Installation

Install Plyr from npm:

npm install plyr

yarn add plyr

pnpm install plyr

bun install plyr

Or include it from a CDN. Plyr draws its own controls, so the stylesheet is required - without it the player falls back to the browser's native controls.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/plyr/dist/plyr.css" />
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/plyr/dist/plyr.min.js"></script>

YouTube video

For a YouTube video, add a div with the provider and the video id, then create the player from it:

<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div>
<script is:inline="true" src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/plyr/dist/plyr.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    window.Plyr && new Plyr("#player-youtube");
  });
</script>

Vimeo file

For the Vimeo video you just need to change the data-plyr-provider.

<div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="707012696"></div>
<script is:inline="true" src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/plyr/dist/plyr.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    window.Plyr && new Plyr("#player-vimeo");
  });
</script>

HTML5 video and audio

For a file you host yourself, use a normal video or audio element and let Plyr take it over. Keep the controls attribute, so the player still works if the script fails to load.

<video id="player-video" controls playsinline poster="/media/clip-poster.jpg">
  <source src="/media/clip.mp4" type="video/mp4" />
  <track kind="captions" label="English" srclang="en" src="/media/clip.en.vtt" default />
</video>

new Plyr('#player-video');

An audio player uses the same pattern with an audio element. See the Plyr documentation for the full list of options.

Customization

Tabler sets the player's main color to the primary color. To change it, override the Plyr CSS variable in your stylesheet:

--plyr-color-main: #ff0000; /* Change to your desired color */

For more customization options, refer to the Customizing the CSS section in the Plyr documentation.

Accessibility

• Keep the native controls unless you build a full replacement. They are keyboard operable and already named in the user's language.
• Video needs captions. Add a track element with kind="captions", and a transcript nearby for audio.
• Never autoplay with sound. If the player must start on its own, keep it muted and give users a visible way to stop it.
• Do not make a video the only source of an instruction. Anything essential belongs in text as well.

Related