You cannot apply styles directly to the video player. However, what you can do is, switch off the default player controls by not writing the controls attribute into your <video> tag.
Here is how that would look like:
<video width="320" height="240">
<source src="video.mp4" type="video/mp4">
</video>
You can now define your own controls with your markup and styles.
The <video> has to be put inside a <figure> tag where you can put in the markup for your control set which would look something like this:
<figure id="videoContainer">
<video id="video" poster="img/poster.jpg">
<source src="video.mp4" type="video/mp4">
</video>
<ul id="video-controls" class="controls">
<li><button id="playpause" type="button">Play/Pause</button></li>
<li><button id="stop" type="button">Stop</button></li>
<li class="progress">
<progress id="progress" value="0" min="0">
<span id="progress-bar"></span>
</progress>
</li>
<li><button id="mute" type="button">Mute/Unmute</button></li>
<li><button id="volinc" type="button">Vol+</button></li>
<li><button id="voldec" type="button">Vol-</button></li>
<li><button id="fs" type="button">Fullscreen</button></li>
</ul>
</figure>
Now you can put in your own styles to the control set and wire in the different controls using the Media API for html5 video.
You can read more about the whole method and the javascript part in this article: developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player
Hope it helps! 😊