Accessible Customizable HTML5, YouTube And Vimeo Player Plugin- plyr

Video
Demo    Download
File Size: 31.46 KB
Views Total: 350 views
Last Update:September 17, 2021
Publish Date: February 14, 2015
Official Website: Go to website
License: MIT
Plugin Author: sampotts

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

List Of Version :
  • 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
  • v3.4.5
  • v3.4.4
  • v3.4.3
  • v3.4.2
  • v3.4.1
  • v3.4.0
  • v3.4.0-beta.2
  • v3.4.0-beta.1

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.