Even though I tried to alter the width of the embedded player size </code> which looks this
<img src="https://i.stack.imgur.com/oeL3h.png" alt="player">
using <code></code>, but no matter what value I use it will not change the size. WordPress says here that it should work.</p>
<p>What else can I do to change the size? I just want to show the play button, nothing else. </p>
<p>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.</p>
</div><br><h2 class="mb0" data-answercount="1">
1 Answer
<span style="display:none;" itemprop="answerCount">1</span>
</h2><br><div class="s-prose js-post-body" itemprop="text">
<p>I assume you're talking about embedding <strong>audio</strong> files, like:</p>
<pre><code>http://s.w.org/images/core/3.9/AintMisbehavin.mp3
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:
Pause button:
Tested on the Twenty Sixteen theme.
