How to change WordPress embedded player size or show just the play button

Question

Even though I tried to alter the width of the embedded player size [embed] which looks this 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.

Answer 1

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:

Pause button:

Tested on the Twenty Sixteen theme.