DEV Community

Cover image for How to add Plyr.io to your website and deploy it for free
Hossam M. Omar
Hossam M. Omar

Posted on

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

#webdev #video #beginners #plyr

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

image

3. after you login go to Sites

image

4. drag and drop your project output folder

image

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

here's my CodePen project.

Thank you!

Top comments (0)