mediaelement audio player volume slider below player

2 Views

I’m trying to convert my theme to the new mediaelement audio player in WordPress version 3.6.

The css is breaking in responsive mode and the volume slide bar displays outside and below the player. When you change the screen size the volume slider pops into position and out of position repeatedly, suggesting a calculated and returned width issue, within the plugin.

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. I’m a newbie when it comes to jQuery but this appears to be the fix…

    Replace: b = this.controls.width() – a – (c.outerWidth(true) – c.width())

    with: b = this.controls.width() – a – (c.outerWidth(true) – c.width())-1

    What this does is always forces .mejs-time-rail width to be 1 px less than calculated so the css is never broken.

  2. An inelegant CSS fix is to make the container a little wider by adding this to the child theme’s style.css

    .mejs-container {
width: 101% !important;

    }

    This won’t be overwritten when WordPress is upgraded

  3. I did this by adding new stylesheet to override the default way it shows.

    // Hides any ugly overflow
.wp-audio-shortcode {
     overflow: hidden;
}

// Give ample room to the controls
.wp-audio-shortcode .mejs-controls {
    width: 101% !important;
}

    This solved it better than overriding any wordpress core files.