How to Add Custom HTML5 Video Player in Blogger?

How to Add Custom HTML5 Video Player in Blogger?

How to Add an HTML5 Video Player in Blogger?
Welcome to Asif Kamboh.com blog, On this occasion, I will share that, How can you add your own HTML5 Video Player to Blogger Blog, And how can you change the theme of this video player, And how to publish videos in this video player without reducing the quality.

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.


What Is HTML5 Video Player?
HTML5 Video Player is software that plays online video in a browser and is developed on the web using JavaScript, CSS, and the HTML language, which is compatible with almost all browsers. Yes, if the user's browser is out of date, the HTML5 video player software will fallback to Flash to play your videos, ensuring that your videos play on almost all web browsers.

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.

<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.1/video.min.js"></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
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="POSTER.jpg"
    data-setup="{}"
  >
    <source src="VIDEO.mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To watch this video, please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video.
    </p>
  </video>


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.

class="video-js vjs-big-play-centered"


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.

Class Meaning
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.

<video
    id="my-video"
    class="video-js vjs-fluid vjs-big-play-centered"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="https://sv2.asifkamboh.com/png"
    data-setup="{}"
  >
    <source src="https://sv2.asifkamboh.com/mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To watch this video, please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video.
    </p>
  </video>




I hope this post will be helpful to you, and if so follow me on my social accounts.
Load comments