Accessible Customizable HTML5, YouTube And Vimeo Player Plugin- plyr

Video
File Size: 31.46 KB
Views Total: 1599 views
Last Update:December 06, 2022
Publish Date: February 14, 2015
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

A Free Video player with jQuery plugin with plyr is provide HTML5, YouTube and Vimeo player. it provide different-different resolution videos when switch to resolution. Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.

How to use :

Add source for java Script & CSS :

<link rel="stylesheet" type="text/css" href="plyr.css">
<script type="text/javascript" src="plyr.js"></script>

Add HTML element for HTML5 Video Player :

<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
  <source src="/path/to/video.mp4" type="video/mp4" />
  <source src="/path/to/video.webm" type="video/webm" />

  <!-- Captions are optional -->
  <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
</video>

For HTML5 Audio :

<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
</audio>

For YouTube player code :

<div class="plyr__video-embed" id="player">
  <iframe
    src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  ></iframe>
</div>

For Vimeo Player :

<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  ></iframe>
</div>

Initialization with Script :

<script>
  const player = new Plyr('#player');
</script>

Done

Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • v3.7.3
  • v3.7.2
  • v3.7.1
  • v3.7.0
  • v3.6.12
  • v3.6.11
  • v3.6.10
  • v3.6.9
  • v3.6.8
  • v3.6.7
  • v3.6.6
  • v3.6.5
  • v3.6.4
  • v3.6.3
  • v3.6.2
  • v3.6.1
  • v3.5.10
  • v3.5.9
  • v3.5.8
  • v3.5.7
  • v3.5.6
  • v3.5.5
  • v3.5.4
  • v3.5.3
  • v3.5.2
  • v3.5.1
  • v3.5.0
  • v3.4.8
  • v3.4.7
  • v3.4.6

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

Related jQuery Plugins

You Might Also Like