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

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



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:


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

Since we are using the </code> shortcode, we could additionally add our own wrapper to support the <em>width</em> parameter:</p>

<pre><code>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 );
</code></pre>

<p>Here we use the <code>$rawattr</code> since we only want to check for the user input.</p>

<p>We add the class <em>audio-button-only</em> to the wrapper if the width is less than 120. </p>

<p>We then inject the inline style after the <em>mediaelement</em> stylesheet to hide the relevant parts like <em>duration</em> and <em>volume</em>:</p>

<pre><code>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; };'
);
} );
</code></pre>

<p>This could of course be added to the relevant stylesheet instead.</p>

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

<p>Now we can use the <em>width</em> parameter within <code></code> for audio files:</p>

<pre><code>http://s.w.org/images/core/3.9/AintMisbehavin.mp3

Output:

Play button:

play button

Pause button:

pause button

Tested on the Twenty Sixteen theme.

Leave a Comment