How to change mediaelementjs audio player container height?

Question

I'm using WordPress to output a mediaelementjs audio player. The audio player's mejs-container is given an inline style of height 30px. The code that does this is located in file wp-includes/js/mediaelement/mediaelement-and-player.min.js. For example:

ioHeight:30

I tried overriding the height in my style sheet but that doesn't work because the inline style takes precedence.

How can I change this height?

Answer 1

When creating the mediaelement you can use the option audioHeight

  $('audio').mediaelementplayer({
    audioWidth: '100%',
    audioHeight: 30
  });

Afterwards, you can access the player using the following JS:

$('audio')[0].player

That will allow you to change the size of the player using the function

$('audio')[0].player.setPlayerSize(width,height);

This function will change the size of the player but leave the controls as they were so you'll need to adjust their size as well using the function:

$('audio')[0].player.setControlsSize();