WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] CSS for WP 3.6 built in audio/video (6 posts)

  1. Quest The Wordsmith
    Member
    Posted 1 year ago #

    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!

  2. Sami Keijonen
    Member
    Posted 1 year ago #

    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.

  3. Christopher Anderton
    Member
    Posted 1 year ago #

    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.

  4. CKatzman
    Member
    Posted 1 year ago #

    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.

  5. toolance
    Member
    Posted 10 months ago #

    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.

  6. vegastriguy
    Member
    Posted 10 months ago #

    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?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags