How to change mediaelementjs audio player container height?

2 Views

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.

Read More

How can I change this height?

enter image description here

Post Views: 2

Related posts

Leave a Reply

1 comment

  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();