docs/pages/ui/components/inline-player.mdx - dev - githubmirror/tabler

docs/pages/ui/components/inline-player.mdx
53 строки3 KB
Paweł Kuna
Add quality gates: Prettier for Astro, astro check for shared, unused SCSS variable lint (#2749)
03 авг 2026, 01:47
03 авг 2026, 01:478962710
---
title: Inline player
docs-libs: plyr
summary: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
description: Lightweight media player for websites.
layout: '@layouts/DocsMdxLayout.astro'
---
import Example from '@components/Example.astro';
import { Code } from 'astro:components';
import { site } from '@shared/lib/site.ts';

## Overview

The Inline Player is a versatile, modern media player designed for seamless integration into websites. It supports HTML5, YouTube, and Vimeo content, offering a lightweight and accessible solution for media playback. Built with customization and ease of use in mind, this player ensures compatibility with modern browsers and enhances user experience.

## Installation

To use the Inline Player, you need to include the Plyr library in your project. You can install it via npm or include it directly from a CDN. The following example demonstrates how to include the Plyr library from a CDN:

<Code
	lang="html"
	code={`<script src="${site.cdnUrl}/dist/libs/plyr/dist/plyr.min.js"></script>`}
/>

## YouTube video

Integrating the Inline Player into your website is straightforward. Below is a sample implementation for a YouTube video:

<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>{`document.addEventListener("DOMContentLoaded", function () { window.Plyr && new Plyr("#player-youtube"); });`}</script>
</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>{`document.addEventListener("DOMContentLoaded", function () { window.Plyr && new Plyr("#player-vimeo"); });`}</script>
</Example>

## HTML5 video and audio

Check out the [Plyr documentation](https://github.com/sampotts/plyr) for more options and examples, including HTML5 video and audio support.

## Customization

The Inline Player uses the primary color as the default color scheme. You can customize the player by modifying the CSS variables in your stylesheet. For example, to change the main color, you can add the following CSS:

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