'How to change the size of video controls without creating an entire custom video player?

I want to change the size of the <video /> controls WITHOUT writing a whole custom video player.

<video src="url-to-video.mp4" controls></video>

Is it possible to just replace the svgs of the controls? Replace the play button icon with a larger play button. Is it possible to increase the size of the displayed controls (larger play button)?

htmlcsshtml5-video


Solution 1:[1]

There is a ::-webkit-media-controls selector that you can use to target these controls in some browsers but there is no easy way to set the size of the content from there (because they use some hard-coded values).

So the easiest is probably to scale the full <video> element use CSS transforms and to shrink it back to the expected size using something like width or height:

video {
  transform-origin: top left;
  transform: scale(2); /* scales the controls too */
  height: 50vh; /* shrink only the video container,
                   the actual size will be (scale * value) */
 }
<video controls src="https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm"></video>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kaiido

Related Questions