Related css files seems to be in wp-includes/js/mediaelement/mediaelementplayer.css and wp-includes/js/mediaelement/wp-mediaelement.css. Iäm not sure are those for video also, haven’t tested.
You can overwrite those styles in your theme/plugin or dequeue those files and make custom ones in your theme/plugin.
Cheers.
Like Sami says, there are some different ways to do this. In a theme i’m working on the first method i used was to simply overwrite those styles where needed with !important and placed that in a separate CSS file as a ”skin” along with the mediaplayer images/svg files i have edited.
Here is a paste: http://pastebin.com/XUvkc9fz
And screenshots: http://cl.ly/OvOu
However, as i don’t like to use !important i’m gonna go the dequeue way instead. But both methods works.
The CSS is located as Sami said in wp-includes/js/mediaelement/mediaelementplayer.css and the interface media (SVG, PNG) is in the same folder.
This is great news! I’ve been struggling in 3.5.1 to compensate for Explorer’s oversized audio control being too big for my layout. Only in Firebug (but not in the inline HTML5 audio element code) did I manage to reduce it to the same size as Chrome’s and Firefox’s controls. I’m also looking forward to being able to float the control to the right for my right-to-left site.
Thanks for this info. Does anyone know how to remove the volume bar completely? In Firefox it often discolates from the main container when squeezed into a tight space.
The default volume is also around 80% so it’d be nice to edit that too.
Trying to figure out the css….I really just want to push the control bar below the video instead of as an overlay…and, still maintain a responsive viewing…..is there a place I can put some padding?
