Search code examples
htmlwordpressvideohtml5-videostrip

Wordpress Stripping HTML5 Playsinline From Videos

I have a number of videos that I have muted and on autoplay on my Wordpress site but Wordpress keeps stripping playsinline from the code, breaking the autoplay functionality on mobile.

<video playsinline="playsinline" autoplay="autoplay" loop="loop" muted="muted" width="240" height="520"> <source src="https://storage.googleapis.com/example.mp4" type="video/mp4" /</video>

Does anyone know how to prevent Wordpress from stripping playsinline="playsinline" from the code when switched to visual editor mode?

Solution

  • I believe you are not using Gutenberg the updated wordpress editor. In gutenberg you can place blocks of html code and they are not changed by the wp editor;

    In previous versions of wordpress you need to pass code via functions.php in your functions.php put the following code below:

    // stop wp removing especifics tags
function bz_uncoverwp_tiny_mce( $init )
{
    // html elements being stripped
    //put here any other tags in this same form
    $init['extended_valid_elements'] = 'video[*], source[*], div[*], articles';

    // don't remove line breaks
    $init['remove_linebreaks'] = false;

    // convert newline characters to BR
    $init['convert_newlines_to_brs'] = true;

    // don't remove redundant BR
    $init['remove_redundant_brs'] = false;

    // pass back to wordpress
    return $init;
}
add_filter( 'tiny_mce_before_init', 'bz_uncoverwp_tiny_mce' );

    I left some other tricks in the code that may be of interest to you ;)