How to add Plyr.io to your website and deploy it for free

Hossam M. Omar — Tue, 16 Feb 2021 18:16:17 +0000

Welcome to a step-by-step very beginner-friendly guide on how to add the amazing and open-source Plyr.io video player to your website.

you can visit the official website for further instructions: Plyr.io

First: create a folder to contain all the necessary files.

inside this folder create 3 basic files index.html, styles.css and script.js

1. inside the index.html file create a basic HTML boilerplate

and add the video tag inside the body tag with any id you like.

<video id="plyr">

</video>

remember that id...

2. inside the `video` tag add `poster="image.jpg"` attribute for a poster for the video before the playback. should look like this:

<video id="plyr" poster="image.jpg"></video>

3. inside the video tag add the `source` tag to add your video,

then inside the source tag add these attributes:
• src="video.mp4" for the video you want to play.
• type="video/mp4" for the video type see all types here.
should look like this so far:

<video
        id="plyr"
        poster="image.jpg"
      >
        <source
          src="video.mp4"
          type="video/mp4"
        />
</video>

if you have one video with different resolutions you can add the size="" attribute, with this attribute you can specify the video resolution. (like the one you find on YouTube). should look like this so far:

<video
        id="plyr"
        poster="image.jpg"
      >
        <source
          src="video1.mp4"
          type="video/mp4"
          size="1080"
        />
        <source
          src="video2.mp4"
          type="video/mp4"
          size="720"
        />
        <source
          src="video2.mp4"
          type="video/mp4"
          size="480"
        />
</video>

if you have captions you can add the track tag inside the video tag, then add these attributes:

• kind="captions"
• label="English"
• src="captions.vtt" locate your captions.
• srclang="en"

you can add more than one language, just add another track tag with these attributes:

• kind="captions"
• label="language"
• src="captions2.vtt" locate your captions.
• srclang="##" find all languages srclang from here

should look like this so far:

<video
        id="plyr"
        poster="image.jpg"
      >
        <source
          src="video1.mp4"
          type="video/mp4"
          size="1080"
        />
        <source
          src="video2.mp4"
          type="video/mp4"
          size="720"
        />
        <source
          src="video2.mp4"
          type="video/mp4"
          size="480"
        />
        <track kind="captions" label="English" src="" srclang="en" default />
        <track kind="captions" label="Arabic" src="" srclang="ar" />
</video>

to make a default caption add the attribute default.

save the file and we are done with the index.html file for now 🙌

Second: adjusting the CSS and JavaScript files.

1. inside the styles.css file create a basic style or however you want to style your website.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

save the file. and that's it with CSS

2. inside the script.js file import Plyr library to your project like this:

const player = new Plyr('#video-tag-id');
note that we target the id we added to the video tag above: so in our case:
const player = new Plyr('#plyr');
save the file. and that's it with JavaScript

Third: linking all the files to the HTML file.

1. CSS files: in the `head` tag add these links

<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.4/plyr.css" />
should look like this:

  <head>
    <link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet" href="https://cdn.plyr.io/3.6.4/plyr.css" />
  </head>

2. JS files: at the end of the `body` tag add these link in the same order:

<script src="https://cdn.plyr.io/3.6.4/plyr.js"></script>
<script src="script.js"></script>
should look like this:

  <body>




    <script src="https://cdn.plyr.io/3.6.4/plyr.js"></script>
    <script src="script.js"></script>
  </body>

and that's it 🎉 your website should run Plyr just fine now.

Last Step: how to deeply this website for free or any other website:

1. Go to: https://www.netlify.com/

2. create a free account

3. after you login go to Sites

4. drag and drop your project output folder

And now you can share your work with anyone on the internet.

here's my CodePen project.

Thank you!

DEV Community: Hossam M. Omar