1

How can I autoplay all videos added by video shortcode?
I can make only one of them autoplay if only one has autoplay attribute set to 1, and others to 0, otherwise all are stopped.

3
  • Why would you play multiple video at the same time?
    – s_ha_dum
    Feb 22, 2014 at 14:43
  • i'm using them like backgrounds on two sections..
    – Domagoj
    Feb 22, 2014 at 14:53
  • There is pauseOtherPlayers: false option in mediaelement, but how to pass that from WP?
    – Domagoj
    Feb 22, 2014 at 14:54

4 Answers 4

3

I ran into this problem while trying to make HTML videos behave like GIFs. WordPress's built-in video player uses HTML video elements but does not allow videos to play simultaneously.

Instead of using the default WordPress video player (which is best used for more standard video content), I chose to manually use the <video> element via a custom shortcode. For the best compatibility (especially on mobiles) we should also make sure the videos are also muted.

After adding the following code, simply use:

[videogif mp4="http://path_to_file.mp4"]

And you'll have a nice video working. To control styling and add (basic) HTML video controls, use something like:

[videogif mp4="http://path_to_file.mp4" style='width: 80%' controls='1']

Code

Add to your functions.php:

// Video gif shortcode
function videogif($atts = [])
{
    // normalize attribute keys, lowercase
    $atts = array_change_key_case((array)$atts, CASE_LOWER);

    // override default attributes with user attributes
    $wporg_atts = shortcode_atts([
            'mp4' => $atts['mp4'],
            'style' => null,
            'controls' => False
        ], $atts);

    // build output
    $o = '';
    $o .= '<video autoplay loop muted playsinline ';
    if ($wporg_atts['controls']) $o .= 'controls ';
    $o .= 'class="videogif"';
    if (!is_null($wporg_atts['style'])) $o .= 'style="' . $wporg_atts['style'] . '" ';
    $o .= '><source src="' . $wporg_atts['mp4'] . '" type="video/mp4" />';
    $o .= '<p>Your browser does not support the video element.</p></video>';

    // return output
    return $o;
}
add_shortcode( 'videogif', 'videogif' );

I also use the following CSS to resize and center the videos by default:

/* Center videogif by default */
.videogif {
    width: 100%;
    display:block;
    margin: 0 auto;
}
1
  • this is perfect but how to add sound ?
    – Shafaq
    Sep 30, 2019 at 20:19
0

You could try to use the shortcode_atts_video filter:

add_filter( 'shortcode_atts_video', 'overwrite_video_atts_wpse', 10,3 );

function overwrite_video_atts_wpse( $out, $pairs, $atts )
{
    // force the autoplay video shortcode attribute to ON:
    $out['autoplay'] = 1; 

    // force the autoplay video shortcode attribute to OFF:
    //$out['autoplay'] = 0; 

    return $out;
}

to overwrite the [video] shortcode attributes.

3
  • Problem is in JS, shortcode outputs autoplay="1" on all shortcodes but player is initialized with $('.wp-video-shortcode').mediaelementplayer(settings); and i need it to be initalized with $('.wp-video-shortcode').mediaelementplayer( {pauseOtherPlayers: false} ); And that js is in WP core
    – Domagoj
    Feb 22, 2014 at 15:18
  • When I add a single shortcode into a post, everythings works as expected. But as soon as the second shortcode is added, then the autoplay ON is not working for any player (with or without the above filter).
    – birgire
    Feb 22, 2014 at 16:27
  • I tried playing with for(var j in mejs.players){var l=mejs.players[j];l.play(); } where the l.id are like mep_0 and mep_1, but that didn't work for some reason but didn't generate any errors. Did you see this question, where one of the suggested solution is to trigger clicks to get around this?
    – birgire
    Feb 22, 2014 at 18:20
0

I have done this with my own video shortcode, in which i changed classes, so I can initiate player with $('.my-video-shortcode').mediaelementplayer( {pauseOtherPlayers: false} );
It does what I needed :)

0

I realise this post is old however birgire response no longer works

Instead of

$out['autoplay'] = '1';

which makes sense, it should actually be

$out['autoplay'] = 'on';

add_filter( 'shortcode_atts_video', 'overwrite_video_atts_wpse', 10,3 );

function overwrite_video_atts_wpse( $out, $pairs, $atts )
{
    // force the autoplay video shortcode attribute to ON:
    $out['autoplay'] = 'on'; 

    // force the autoplay video shortcode attribute to OFF:
    //$out['autoplay'] = 0; 

    return $out;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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