How to Add Custom HTML5 Video Player in Blogger?Snippet Tips
The name of the HTML5 video player, which I'm going to share, is videosjs, and it's free for all users. You can install it on your Blogspot blog via the CDN server; with the help of this video player, you can easily play mp3 audios and mp4/webm videos on your blog.
If you want to create your own video player on your Blogspot blog like this blog. And want to publish high-resolution videos like 4K, 2K, 1080p, and 720p videos to your blog without compromising the quality of the videos, you can add by following these steps.
For example, if you create a video tag in HTML and put a direct link to your MP4 or webm video in it, and then when the user comes to this page, he will see a video player. In which he can watch this video online without downloading.
How to Add Custom HTML5 Video Player to 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/video.js/7.10.1/video-js.min.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.
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.
Before adding this code to your theme, replace the highlighter code "POSTER.jpg" with your custom video thumbnail URL and replace "VIDEO.mp4" with your video URL address. And if your video format is "VIDEO.webm" then change the type in this code to "video/webm".
Just now your video in the post will be shown in the video player and you can watch it, and the video play button icon is shown in the top left corner if you want to move it to the center, Add this tag vjs-big-play-centered to video class.
This is what the video class tag will look like when you add the play button icon center tag to the video class.
And this Videojs player offers three predefined classes that make it easy to maintain video element aspect ratio. If you use one of these tag then the width and ratio of your video automatically changes to the selected ratio, you don't need to manually add height and width to the video tag.
|vjs-fluid||It keeps the video in proportion to the original aspect.|
|vjs-16-9||It keeps the video in a 16:9 aspect ratio.|
|vjs-4-3||It keeps the video in a 4:3 aspect ratio.|
I want the video player to be 100% the width and height of the parent container, and for that i will use the vjs-fluid tag to keep the height and width of my video in the original ratio.
class="video-js vjs-fluid vjs-big-play-centered"
I have just made all the settings for my video player and here is an example of my code for you to clearly understand how you add your video and poster URLs to video player code and class tags.
I hope this post will be helpful to you, and if so follow me on my social accounts.