If you want to customize the appearance of the html5 audio/video controls using css, here is a sample code snippet:
HTML Structure
<div id="custom-controls" class="controls" data-state="hidden">
<button id="playpause" 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="volinc" type="button" data-state="volup">Vol+</button>
<button id="voldec" type="button" data-state="voldown">Vol-</button>
<button id="fs" type="button" data-state="go-fullscreen">Fullscreen</button>
</div>
Custom Styling
The video container and its controls are nested within a <figure> element, with specific width, height, and positioning styles applied for layout and display purposes:
figure {
max-width:64rem;
width:100%;
max-height:30.875rem;
height:100%;
margin:1.25rem auto;
padding:1.051%;
background-color:#666;
}
To ensure proper alignment and arrangement, additional styling rules are required for the video controls container:
.controls {
width:100%;
height:8.0971659919028340080971659919028%; /* relative to figure's height */
position:relative;
}
audio {
background-color: #95B9C7;
/*etc...*/
}
Credit:
- https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics