I’m trying to add a ‘muted’ option to the video tag output with the content of a post using the built in wp video shortcode. I found this answer How can I get the shortcode to allow query string parameters? which has led me to the add_filter but I’m really struggling how to use it? I thought the following code might work:

function my_video_shortcode( $output, $atts, $video, $post_id, $library  ) {
    /**
     * @param string $output  Video shortcode HTML output.
     * @param array  $atts    Array of video shortcode attributes.
     * @param string $video   Video file.
     * @param int    $post_id Post ID.
     * @param string $library Media library used for the video shortcode.
     */

     $html_atts = array(
        'class'    => apply_filters( 'wp_video_shortcode_class', 'wp-video-shortcode' ),
        'id'       => sprintf( 'video-%d-%d', $post_id, $instance ),
        'width'    => absint( $atts['width'] ),
        'height'   => absint( $atts['height'] ),
        'poster'   => esc_url( $atts['poster'] ),
        'loop'     => wp_validate_boolean( $atts['loop'] ),
        'autoplay' => wp_validate_boolean( $atts['autoplay'] ),
        'preload'  => $atts['preload'],
        'muted'    => 'muted',
    );
    $attr_strings = array();

    foreach ( $html_atts as $k => $v ) {
            $attr_strings[] = $k . '="' . esc_attr( $v ) . '"';
    }

    $html="";
    if ( 'mediaelement' === $library && 1 === $instance ) {
            $html .= "<!--[if lt IE 9]><script>document.createElement('video');</script><![endif]-->\n";
    }
    $html .= sprintf( '<video %s controls="controls">', join( ' ', $attr_strings ) );

    $fileurl="";
    $source="<source type="https://wordpress.stackexchange.com/questions/284882/%s" src="https://wordpress.stackexchange.com/questions/284882/%s" />";
    foreach ( $default_types as $fallback ) {
        if ( ! empty( $atts[ $fallback ] ) ) {
            if ( empty( $fileurl ) ) {
                    $fileurl = $atts[ $fallback ];
            }
            if ( 'src' === $fallback && $is_youtube ) {
                    $type = array( 'type' => 'video/youtube' );
            } elseif ( 'src' === $fallback && $is_vimeo ) {
                    $type = array( 'type' => 'video/vimeo' );
            } else {
                    $type = wp_check_filetype( $atts[ $fallback ], wp_get_mime_types() );
            }
            $url = add_query_arg( '_', $instance, $atts[ $fallback ] );
            $html .= sprintf( $source, $type['type'], esc_url( $url ) );
        }
    }

    if ( ! empty( $content ) ) {
            if ( false !== strpos( $content, "\n" ) ) {
                    $content = str_replace( array( "\r\n", "\n", "\t" ), '', $content );
            }
            $html .= trim( $content );
    }

    if ( 'mediaelement' === $library ) {
            $html .= wp_mediaelement_fallback( $fileurl );
    }
    $html .= '</video>';

    $width_rule="";
    if ( ! empty( $atts['width'] ) ) {
            $width_rule = sprintf( 'width: %dpx; ', $atts['width'] );
    }
    $output = sprintf( '<div style="https://wordpress.stackexchange.com/questions/284882/%s" class="wp-video">%s</div>', $width_rule, $html );

    return $output;

}
add_filter('wp_video_shortcode', 'my_video_shortcode', 10, 2);

I get Undefined variable: for $video, $post_id and $library and the video’s in the page are blank. It is because they don’t have a video source but muted is there, though I realise not correctly.

Here’s one of the output in the page:

<div style="width: 1306px; " class="wp-video">
<video class="wp-video-shortcode" id="video-0-0" width="1306" height="882" poster="" loop="" autoplay="" preload="metadata" muted="muted" controls="controls"></video>

I could write my own shortcode for video’s but it’s already almost there and built in, so it seems unnecessary to do it.

I would love to add a check box to the media library options as well, but a nice to have.

Any help much appreciated.

2 Answers
2

I get Undefined variable: for $video, $post_id and $library and the
video’s in the page are blank.

Replace:

add_filter( 'wp_video_shortcode', 'my_video_shortcode', 10, 2 );

with:

add_filter( 'wp_video_shortcode', 'my_video_shortcode', 10, 5 );

to access all five input arguments in your filter’s callback.

ps: my_ is such a common prefix, that I would consider something more unique.

pps: Here’s another approach by overriding the shortcode:

add_shortcode( 'video', function ( $atts, $content ) 
{
    $output = wp_video_shortcode( $atts, $content );

    if( ! isset( $atts['muted'] ) || ! wp_validate_boolean( $atts['muted'] ) ) 
        return $output;

    if( false !== stripos( $output, ' muted="1"' ) )
        return $output;

    return str_ireplace( '<video ', '<video muted="1" ', $output ); 
} );

where the muted attribute is activated with:


Hope you can adjust it to your needs!

Leave a Reply

Your email address will not be published. Required fields are marked *