CODEWITHSUNDEEP
htmlcsshtml5-video
grabury
grabury

Reputation: 5559

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)?

Upvotes: 1

Views: 1552

Answers (1)

Kaiido
Kaiido

Reputation: 136756

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>

Upvotes: 1

Related Questions