Build HTML Video Player Support SD, HD, FHD, UHD Resolution

HTML5 video player which support multiple video resolution sd (standard deviation), HD (high deviation), FHD (full high deviation), UHD (ultra high deviation) when we click the button it should change the size according to its resolution you also can change video path by giving a name with extension. Save the code as given suggested name "htmlplayer.html". remember file name extension should be .html or .htm. 

Tip:- This code is not converting videos, this is just increasing a length and width of the video, so don't be confused.


<!DOCTYPE html>

<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">SD</button>
<button onclick="makeSmall()">HD</button>
<button onclick="makeNormal()">FHD</button>
<button onclick="makeNormal1()">UHD</button>
<video id="video1" width="360">
<source src="aa1.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.

var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)

function makeBig() {
myVideo.width = 480;

function makeSmall() {
myVideo.width = 720;

function makeNormal() {
myVideo.width = 1080;

function makeNormal1() {
myVideo.width = 2160;

<p>HTML5 Video Player By <a href="http://www.programmingwithbasics.com/" target="_blank">Ghanendra Yadav</a>.</p>

                                                 Video Playing In 360 Px

free html5 SD video player

                                                     Video Playing In SD 480 Px

free html5 video player,

                                                       Video Playing In HD 720 Px

html player for website pwb

                                                  Video Playing In FHD 1080 Px

html5 player for website pwb support SD, HD, DVD

                                                        Video Playing In UHD 2160 Px

html media player support upto 4K videos


  1. Pretty blog, so many ideas in a single site, thanks for the informative article, keep updating more article.
    Webdesining course in chennai

  2. I admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much.
    HTML5 courses in chennai

  3. Thanks for sharing this informative content with us. We are working on html5 video player . It is really helpful for me and I get my lots of solution.

  4. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress development company in Chennai