I was wondering how to style the buttons and the whole element of an HTML Video with CSS. I would like to know the steps that need to be taken to complete these actions.

<video class="video" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

I was wondering how to style the buttons and the whole element of an HTML Video with CSS. I would like to know the steps that need to be taken to complete these actions.

<video class="video" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

• javascript
• html
• css
• video

• @BrendanOggeri check here mrbool.com/… – Akshay Commented Nov 29, 2014 at 15:41

4 Answers 4

you can use videojs for custom html5 video player.

Video.js is pretty easy to set up. It can take a matter of seconds to get the player up and working on your web page.

I do not think you may style the buttons and the controls of the video tag, but you can at least apply some styles for the whole video itself, such as:

video {
   border: 5px groove darkblue;
   padding: 30px;
   width: auto;
   height: auto;
}

I tried to play with the controls' styles a bit, but got no results.

[controls] {
    background: red;
    color: red;
}

::controls, ::-controls, ::-webkit-controls {
    background: red;
    color: red;
}

^{(Yes, I know what I tried was dumb, but at least I tried!)}

If you are okay with using JavaScript to do that, you might want to look at VIDEO.JS or at this article from MrBool where everything is done manually.

try setting an id .For example:

<video class="video" id="video-style" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

CSS:
#video-style{
border:2px solid blue;
padding:5px;
/**Or add your own style**/
}

you can style it using element selector;

video {
border: 5px solid red;
/*Your CSS here for styling*/
}

For advance styling & skinning styling look in to videojs.

Also a good read Build a custom HTML5 video player.