Support » Alpha/Beta/RC » CSS for WP 3.6 built in audio/video

  • Resolved Quest The Wordsmith


    Please don’t kill me as I’m a newb. For the newly added audio/video functions built into the WP core, is there a particular file that’s used for the CSS of the player? I wan’t to change the look of it instead of resorting to the browsers default. Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Sami Keijonen



    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.

    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:
    And screenshots:

    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… there a place I can put some padding?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS for WP 3.6 built in audio/video’ is closed to new replies.