How to add Plyr.io to your website and deploy it for free
Tags: webdev, video, beginners, plyr
Published: 2021-02-16 18:16:17

## 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](https://plyr.io/)**
<hr/>

### First: create a folder to contain all the necessary files.
inside this folder create **3** basic files **index.html**, **styles.css** and **script.js**
<hr/>
####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...
<hr/>
####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>`

<hr/>
####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._](https://www.w3schools.com/tags/att_source_type.asp)
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_](https://www.w3schools.com/tags/ref_language_codes.asp)

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 🙌
<hr/>
### Second: adjusting the CSS and JavaScript files.
<hr/>
####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
<hr/>
####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
<hr/>
### Third: linking all the files to the HTML file.
<hr/>
####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>
```
<hr/>
####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.
<hr/>
### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4o5ij6avwgm4pllcax5.png) 
####3. after you login go to Sites
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iz4zcsfhpqudvhe6pht5.png)
 
####4. drag and drop your project output folder
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6coz16eqx75pfwiyl9j.png)
 
And now you can share your work with anyone on the internet.

here's my [CodePen project](https://codepen.io/hossam-m-omar/pen/BPyOQQ).

Thank you!