2

Even though I tried to alter the width of the embedded player size [embed] which looks this player using [embed width="50" height="50"], but no matter what value I use it will not change the size. WordPress says here that it should work.

What else can I do to change the size? I just want to show the play button, nothing else.

And I don't want to change the content width like it is suggested in other posts on this website. I want this change to only affect the embedded player.

  • You probably need to set overflow:hidden somewhere. – cjbj May 28 '16 at 16:07
  • Was it tested with the default theme, plugins turned off and clean browser cache? – Max Yudin May 28 '16 at 16:12
  • my theme has no style added for this player. it seems the player won't take the size setting. on source code of the page I see 'mejs-mediaelement' will always display width: 100%; visibility: hidden; – whitelord May 28 '16 at 16:34
  • Maybe this for the audio player helps? – birgire May 28 '16 at 16:58
  • 1
    But I guess you only want this for audio files? The [embed] shortcode can also embed videos. – birgire May 28 '16 at 17:11
5

I assume you're talking about embedding audio files, like:

[embed]http://s.w.org/images/core/3.9/AintMisbehavin.mp3[/embed]

The audio embed handler is registered within wp_maybe_load_embeds() and filtered through the wp_embed_handler_audio filter.

So within WP_Embed::shortcode() this generates to:

[audio src="http://s.w.org/images/core/3.9/AintMisbehavin.mp3" /]

so some of the methods mentioned here for the [audio] shortcode should work.

Since we are using the [embed] shortcode, we could additionally add our own wrapper to support the width parameter:

add_filter( 'wp_embed_handler_audio', function( $html, $attr, $url, $rawattr )
{
    if( isset( $rawattr['width'] ) )
    {
        $html = sprintf( 
            '<div class="wpse_audio_embed_wrapper%s" style="width:%dpx">%s</div>', 
            $class = 1 * $rawattr['width'] < 120 ? ' audio-button-only' : '',
            $rawattr['width'], 
            $html
        );
    }
    return $html;
}, 10, 4 );

Here we use the $rawattr since we only want to check for the user input.

We add the class audio-button-only to the wrapper if the width is less than 120.

We then inject the inline style after the mediaelement stylesheet to hide the relevant parts like duration and volume:

add_action( 'wp_enqueue_scripts', function()
{
    wp_add_inline_style( 
        'mediaelement', 
        ' .audio-button-only .mejs-volume-button, 
          .audio-button-only .mejs-duration, 
          .audio-button-only .mejs-currenttime, 
          .audio-button-only .mejs-horizontal-volume-slider 
          { display: none !important; };'
    );
} );

This could of course be added to the relevant stylesheet instead.

We could also extend this approach to support other mini sized versions with corresponding classes.

Now we can use the width parameter within [embed] for audio files:

[embed width="28"]http://s.w.org/images/core/3.9/AintMisbehavin.mp3[/embed]

Output:

Play button:

play button

Pause button:

pause button

Tested on the Twenty Sixteen theme.

  • thank you! that almost works perfectly. the problem is that "00:00 00:00" is still there and it goes below the play button..I guess you don't see it because of the white background. I also see this if I copy it "Use Up/Down Arrow keys to increase or decrease volume." . any way to remove the time (and the text)? – whitelord May 28 '16 at 21:09
  • I updated the answer with the audio-mini class approach from my previous answer, hopefully you can adjust it accordingly. – birgire May 28 '16 at 21:44
  • thanks, but it doesn't seem to change anything – whitelord May 28 '16 at 22:19
  • do you get the wrapper and the inline css style? @whitelord – birgire May 28 '16 at 22:30
  • in the source code I see this: <style id='mediaelement-inline-css' type='text/css'>.audio-mini .mejs-volume-button, .audio-mini .mejs-duration, .audio-mini .mejs-currenttime, .audio-mini .mejs-horizontal-volume-slider { display: none !important; };</style> – whitelord May 28 '16 at 22:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.