mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 01:44:25 +04:00
59 lines
2.1 KiB
Plaintext
59 lines
2.1 KiB
Plaintext
---
|
||
title: Inline player
|
||
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.
|
||
---
|
||
|
||
|
||
## 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:
|
||
|
||
```html
|
||
<script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
|
||
```
|
||
|
||
## Sample demo
|
||
|
||
Integrating the Inline Player into your website is straightforward. Below is a sample implementation for a YouTube video:
|
||
|
||
```html
|
||
<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div>
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
window.Plyr && (new Plyr('#player-youtube'));
|
||
});
|
||
</script>
|
||
```
|
||
|
||
Look at the example below to see how the Inline Player works with a YouTube video.
|
||
|
||
```html example vendors height="500px" libs="plyr"
|
||
<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div>
|
||
<script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
window.Plyr && (new Plyr('#player-youtube'));
|
||
});
|
||
</script>
|
||
```
|
||
|
||
## Vimeo file
|
||
|
||
Here’s how to embed a Vimeo video using the Inline Player:
|
||
|
||
```html example vendors height="500px" libs="plyr"
|
||
<div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="515937365"></div>
|
||
<script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
window.Plyr && (new Plyr('#player-vimeo'));
|
||
});
|
||
</script>
|
||
```
|