How to Add and Customize Plyr.io Video Player in Blogger?
Snippet Tips
The method is that we will install Plyr.io Video Player on our blog theme using the CDN server, then we will add and customize YouTube, Vimeo and HTML5 videos using the video tag in the blog post.
So if you want to know what is Plyr.io Player, how to integrate into Blogger Blogspot, how to add video and audio to a post using Plyr.io, follow these steps.
What is Plyr.io?
Plyr.io is a responsive video player, and the interface and integration of this video player is very simple, easy to customize, it's very lightweight, and free for all users. And it's compatible with all modern browsers.Plyr.io supports all HTML5 video and audio, YouTube and Vimeo major video formats, custom video posters, VTT captions, screen readers, picture-in-picture mode and many more features.
How to Add and Customize Plyr.io Video Player in Blogger?
Open Blogger Dashboard > Themes Menu > Click on the Three Dots and click the Edit HTML option, and then add the following code below the <head>.<link href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.3/plyr.css" rel="stylesheet">And then add the below code before the </body> and click the Save Theme button in the top left corner to save the changes.
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.3/plyr.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const player = Plyr.setup('.js-player');
});
</script>After adding the above both codes into your blog theme, go back to the post where you want to add your video, and change the post page "Compose view" to "HTML View" and add the below code in it.
<video
class="js-player"
poster="Poster.jpg">
<source src="Video.mp4"
size="720"/>
</video>After adding the above code to your post, replace the highlighter code "Poster.jpg" with your video thumbnail URL and replace "Video.mp4" with the video URL address. If the video resolution is 1080p, then change the size to 1080.
If you want to add YouTube videos to your blog posts within Plyr.io Player, add the following code. And then replace the YouTube Video ID with the Highlight ID.
<div
class="js-player"
data-plyr-provider="youtube"
data-plyr-embed-id="5S2ZZr3KG6g">
</div>If you want to add Vimeo videos to your blog posts inside Plyr.io Player, add the following code. And then change your Vimeo Video ID to Highlight ID.
<div
class="js-player"
data-plyr-provider="vimeo"
data-plyr-embed-id="333197341">
</div>If you want to add audio MP3 media to the plyr.io, add the following code. And then replace the highlighted Audio.mp3 with your mp3 URL address.
<audio
class="js-player">
<source src="Audio.mp3"/>
</audio>And if you want to customize the video player controls, you have to add the following code instead of the code that you add before the body. And then leave the player tags in this code to your liking and remove the rest and save the theme.
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.3/plyr.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const controls = [
'play-large', // Large play button in the middle
'restart', // Restart playback
'rewind', // Flip search time (default 10 seconds)
'play', // Play / pause playback
'fast-forward', // Fast forward time (default 10 seconds)
'progress', // The progress bar and scrubber for playback and buffering
'current-time', // Current playback time
'duration', // Full term media
'mute', // Toggle silent
'volume', // Volume control
'captions', // Toggle captions
'settings', // Settings menu
'pip', // Picture in Picture
'airplay', // Airplay
'download', // Display a download button with a custom link to an existing resource or custom URL that you specify in your options
'fullscreen' // Toggle fullscreen
];
const player = Plyr.setup('.js-player', { controls });
});
</script>And here is the demo link in which I have included the Plyr.io Video Player to help you clearly understand what this video player looks like with the controls, HTML5 audio / video, YouTube and Vimeo videos.
I hope I have been able to teach you how to add and customize the Plyr.io Video Player in Blogger, and if you have any questions about it, you can ask me in the comments section below.