Search code examples
html5-video

HTML5 video media controls panel customization


I have a little bit of a conundrum. I am trying to change the shape of the media controls panel in an HTML5 video player, and so far the only thing I'm able to affect is the background color.

This is the CSS element:

video::-webkit-media-controls-panel {
     background-color: #bbb;
}
<video width="350" height="240">
<source src="file-path" type="video/mp4">
</video>

The problem is that no matter what I try, it's this default, ugly gray control panel player screenshot

How do I change that? I'd like to changed the height, width, and the border radius.

CSS preferred.

Thanks

For the border radius, I've tried

-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;

... but it's not working, even with the !important flag.

I've also tried using height to affect the height, but height but that's not working either.


Solution

  • Problem solved: Thanks to VC-One's reply I was able to fix the problem, but not by disabling controls and creating my own buttons, but by adding the video::-webkit-media-controls-enclosure to the CSS.

    When I started customizing the HTML5 player, I took the parameters from an HTML5 video page, but the video::-webkit-media-controls-enclosure wasn't one of the items. When VC-One had that in his response, pointinged out that the height goes in the panel and width goes in the enclosure, I was able to solve the issue by adjusting my css like so:

    video::-webkit-media-controls-enclosure {
        width:100%;
        background-color:transparent;
        -moz-border-radius: 1px !important;
        -webkit-border-radius: 1px !important;
        border-radius: 1px !important;
        filter: alpha(opacity=80);
        opacity: 0.8;
        margin-bottom:-20px;
        overflow: hidden;
    }
    video::-webkit-media-controls-panel {
        background-color: #eee;
        height:35px !important;
    }
    

    I made the enclosure background transparent, and set the background color in the panel, and adjusted all of the other elements, including border radius in the enclosure.

    Now I have a pretty player on my site!

    pretty html5 player

    Thanks everyone, especially you VC-One.