1. Web
  2. Media
  3. Guides
  4. Audio and video delivery
  5. Video player styling basics

Video player styling basics

In the previous Cross browser video player article we described how to build a cross-browser HTML video player using the Media and Fullscreen APIs. This follow-up article looks at how to style this custom player, including making it responsive.

HTML markup

There are a few changes that were made to the HTML markup shown in the previous article. The custom video controls and <progress> element are now contained within <div> elements, rather than residing inside unordered list items.

The markup for the custom controls now looks as follows:

html
<div id="video-controls" class="controls" data-state="hidden">
  <button id="play-pause" type="button" data-state="play">Play/Pause</button>
  <button id="stop" type="button" data-state="stop">Stop</button>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar"></span>
    </progress>
  </div>
  <button id="mute" type="button" data-state="mute">Mute/Unmute</button>
  <button id="vol-inc" type="button" data-state="vol-up">Vol+</button>
  <button id="vol-dec" type="button" data-state="vol-down">Vol-</button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreen</button>
</div>

A data-state attribute is used in various places for styling purposes and these are set using JavaScript. Specific implementations will be mentioned at appropriate places below.

Styling

The resultant video player style used here is rather basic — this is intentional, as the purpose is to show how such a video player could be styled and be made responsive.

Note: In some cases some basic CSS is omitted from the code examples here as its use is either obvious or not specifically relevant to styling the video player.

Basic styling

The video controls container itself needs some styling so that it is set up the correct way:

css
.controls {
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 2rem;
  position: relative;
}

The position is set to relative, which is required for its responsiveness (more on that later).

As mentioned earlier, a data-state attribute is used to indicate whether the video controls are visible or not and it needs corresponding CSS declarations:

css
.controls[data-state="hidden"] {
  display: none;
}

Buttons

The first major styling task to tackle is to make the video control's buttons actually look like and act like real buttons.

Each button has some basic styling:

css
.controls button {
  width: 2rem;
  height: 2rem;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: none;
  cursor: pointer;
  color: transparent;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

Each button is set to be 2rem in width and height. By default, all <button> elements have a border, so this is removed. Since background images will be used to display appropriate icons, the background color of the button is set to be transparent, non-repeated, and the element should fully contain the image. Furthermore, there's some label text that should not be visible on screen, so the text color is set to transparent.

The :hover and :focus states are then set for each button that alters the opacity of the button:

css
.controls button:hover,
.controls button:focus {
  opacity: 0.5;
}

To obtain appropriate button images, a set of free common control set icons was downloaded from the web. Each image was then converted to a base64 encoded string (using an online base64 image encoder), since the images are quite small, the resultant encoded strings are quite short.

Since some buttons have dual functionality, e.g., play/pause, and mute/unmute, these buttons have different states that need to be styled. As mentioned earlier, a data-state variable is used to indicate which state such buttons are currently in.

For example, the play/pause button has the following background image definitions (the full base64 strings have been omitted for brevity):

css
.controls button[data-state="play"] {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAA…");
}

.controls button[data-state="pause"] {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAA…");
}

When the data-state of the button is changed, the appropriate image will also be changed. All the other buttons are treated in a similar way.

Progress bar

The <div> container for the <progress> element has its flex-grow enabled, so that it grows to fill up the remaining space in the controls. It also displays a pointer cursor to indicate it is interactive.

css
.controls .progress {
  flex-grow: 1;
  cursor: pointer;
  height: 80%;
}

The <progress> element has the following basic style set up:

css
.controls progress {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  color: #0095dd;
  border-radius: 2px;
  margin: 0 auto;
}

Like the <button> elements, <progress> also has a default border, which is removed here. It is also given a slight rounded corner for aesthetic reasons.

There are some browser-specific properties that need to be set to ensure that Firefox and Chrome use the required color for the progress bar:

css
.controls progress::-moz-progress-bar {
  background-color: #0095dd;
}

.controls progress::-webkit-progress-value {
  background-color: #0095dd;
}

Although the same properties are set to the same value, these rules need to be defined separately, or the whole declaration may become valid if one selector isn't recognized.

Fullscreen

Now we style the controls for fullscreen mode. Because the <figure> element is the one put in fullscreen, we can target it using the :fullscreen pseudo-class. We do a few things:

  • Make the figure take up the whole screen with height: 100%
  • Make the controls bar stick to the bottom while the video stays centered using flexbox
  • Make the container transparent to show the native backdrop color
  • Hide the figcaption
  • Restore the background color for the controls row to ensure our black buttons are still visible when the backdrop is black.
css
figure:fullscreen {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 100%;
  height: 100%;
  background-color: transparent;
}
figure:fullscreen video {
  margin-top: auto;
  margin-bottom: auto;
}
figure:fullscreen figcaption {
  display: none;
}
figure:fullscreen .controls {
  background-color: #666666;
}

Responsive styling

Now that the player has its basic look and feel taken care of, some other styling changes — involving media queries — need to be made in order to make it responsive.

We want to customize the controls layout when it is viewed on a smaller screen (680px/42.5em), so a breakpoint is defined here. We tweak the sizing and position properties for the buttons and progress bar so they are arranged differently:

css
@media screen and (width <= 42.5em) {
  .controls {
    height: auto;
  }

  .controls button {
    width: calc(100% / 6);
    margin-top: 2.5rem;
  }

  .controls .progress {
    position: absolute;
    top: 0;
    width: 100%;
    margin-top: 0;
    height: 2rem;
  }

  .controls .progress progress {
    width: 98%;
  }

  figcaption {
    text-align: center;
  }
}

The .progress container is now moved to the top of the control set via position:absolute, so it and all the buttons need to be wider. In addition, the buttons need to be pushed below the progress container so that they are visible.

JavaScript

That's really it for the immediate styling; the next task is making a number of JavaScript changes to ensure that everything works as expected, mostly to rework the buttons logic.

Play/Pause and mute

Now that the buttons actually look like buttons and have images that indicate what they do, some changes need to be made so that the "dual functionality" buttons (such as the play/pause button) are in the correct "state" and display the correct image. In order to facilitate this, a new function is defined called changeButtonState(), which accepts a type variable indicating the button's functionality:

js
function changeButtonState(type) {
  if (type === "play-pause") {
    // Play/Pause button
    if (video.paused || video.ended) {
      playPause.setAttribute("data-state", "play");
    } else {
      playPause.setAttribute("data-state", "pause");
    }
  } else if (type === "mute") {
    // Mute button
    mute.setAttribute("data-state", video.muted ? "unmute" : "mute");
  }
}

This function is then called by the relevant event handlers:

js
video.addEventListener("play", () => {
  changeButtonState("play-pause");
});

video.addEventListener("pause", () => {
  changeButtonState("play-pause");
});

stop.addEventListener("click", (e) => {
  video.pause();
  video.currentTime = 0;
  progress.value = 0;

  // Update the play/pause button's 'data-state' which allows the
  // correct button image to be set via CSS
  changeButtonState("play-pause");
});

mute.addEventListener("click", (e) => {
  video.muted = !video.muted;
  changeButtonState("mute");
});

You might have noticed that there are new handlers where the play and pause events are reacted to on the video. There is a reason for this! Even though the browser's default video control set has been turned off, many browsers make them accessible by right-clicking on the HTML video. This means that a user could play/pause the video from these controls, which would then leave the custom control set's buttons out of sync. If a user uses the default controls, the defined Media API events — such as play and pause — are raised so this can be taken advantage of to ensure that the custom control buttons are kept in sync. Our click also raises the play and pause events when calling the play() and pause() methods, so nothing needs to change here:

js
playPause.addEventListener("click", (e) => {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
});

Volume

The alterVolume() function, called when the player's volume buttons are clicked, also changes — it now calls a new function called checkVolume():

js
function checkVolume(dir) {
  if (dir) {
    const currentVolume = Math.floor(video.volume * 10) / 10;
    if (dir === "+" && currentVolume < 1) {
      video.volume += 0.1;
    } else if (dir === "-" && currentVolume > 0) {
      video.volume -= 0.1;
    }

    // If the volume has been turned off, also set it as muted
    // Note: can only do this with the custom control set as when the 'volumechange' event is raised,
    // there is no way to know if it was via a volume or a mute change
    video.muted = currentVolume <= 0;
  }
  changeButtonState("mute");
}

function alterVolume(dir) {
  checkVolume(dir);
}
volInc.addEventListener("click", (e) => {
  alterVolume("+");
});
volDec.addEventListener("click", (e) => {
  alterVolume("-");
});

This new checkVolume() function does the same thing as the alterVolume() but it also sets the state of the mute button depending on the video's current volume setting. checkVolume() is also called when the volumechange event is raised:

js
video.addEventListener("volumechange", () => {
  checkVolume();
});

Progress and fullscreen

The Progress bar and Fullscreen implementations hasn't changed.

Result

Warning: The example video may be loud!

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content