## 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/)**

### 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. ```

``` 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: `

####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: ```

``` 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: ```

``` 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: ```

``` 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 `` `` should look like this: ``` ```

####2. JS files: at the end of the `body` tag add these link in the same order: `` `` should look like this: ``` ``` 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](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!

hossamgaucho

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

Join Our Newsletter. No Spam, Only the good stuff.