HTML & CSS Video Style

Question

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>

Solution 1

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.

Solution 2

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.

Solution 3

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**/
}

Solution 4

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.

View more solutions

Comments

[Akshay]

@BrendanOggeri check here mrbool.com/…