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