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!
Top comments (0)