How to Add and Customize Video Player in Blogger?

How to Add and Customize Video Player in Blogger?

How to Add and Customize Video Player in Blogger?
Welcome to Asif Kamboh Blog. On this occasion, I will discuss with you how you can add a simple HTML5 audio / video, YouTube and Vimeo video player to your Blogger Blogspot blog.

The method is that we will install 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 Player, how to integrate into Blogger Blogspot, how to add video and audio to a post using, follow these steps.

What is 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. 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 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="" 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=""></script>
      document.addEventListener('DOMContentLoaded', () => {
          const player = Plyr.setup('.js-player');

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.

<source src="Video.mp4"

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 Player, add the following code. And then replace the YouTube Video ID with the Highlight ID.


If you want to add Vimeo videos to your blog posts inside Player, add the following code. And then change your Vimeo Video ID to Highlight ID.


If you want to add audio MP3 media to the, add the following code. And then replace the highlighted Audio.mp3 with your mp3 URL address.

<source src="Audio.mp3"/>

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=""></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 });

And here is the demo link in which I have included the 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 Video Player in Blogger, and if you have any questions about it, you can ask me in the comments section below.
Load comments