---
title: Inline player
docs-libs: [plyr]
summary: Play HTML5, YouTube and Vimeo media with Plyr, a small accessible player styled with Tabler colors.
description: Embed audio and video with a lightweight, accessible media player that supports HTML5, YouTube, and Vimeo sources.
related: [/ui/components/carousel]
---
import Example from '@components/Example.astro';
import { Code } from 'astro:components';
import TabsPackage from '@components/TabsPackage.astro';
import { site } from '@shared/lib/site.ts';

## Overview

The inline player is [Plyr](https://github.com/sampotts/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:

<TabsPackage name="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.

<Code
	lang="html"
	code={`<link rel="stylesheet" href="${site.cdnUrl}/dist/libs/plyr/dist/plyr.css" />
<script src="${site.cdnUrl}/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:

<Example>
<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div> <script is:inline src={`${site.cdnUrl}/dist/libs/plyr/dist/plyr.min.js`}></script> <script is:inline set:html={`document.addEventListener("DOMContentLoaded", function () { window.Plyr && new Plyr("#player-youtube"); });`} />
</Example>

## Vimeo file

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

<Example>
<div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="707012696"></div> <script is:inline src={`${site.cdnUrl}/dist/libs/plyr/dist/plyr.min.js`}></script> <script is:inline set:html={`document.addEventListener("DOMContentLoaded", function () { window.Plyr && new Plyr("#player-vimeo"); });`} />
</Example>

## 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.

```html
<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>
```

```js
new Plyr('#player-video');
```

An audio player uses the same pattern with an `audio` element. See the [Plyr documentation](https://github.com/sampotts/plyr) 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:

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

For more customization options, refer to the [Customizing the CSS](https://github.com/sampotts/plyr?tab=readme-ov-file#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.