WordPress oEmbed W3C Validation

by

I recently built a theme that utilises the oEmbed feature in WordPress.

Where possible, I like my themes to validate via W3C. The content of the website is driven by Vimeo videos, so I’m getting well over 30 validation errors.

The validation tool flags the following attributes:

frameborder
webkitallowfullscreen
mozallowfullscreen

I’m aware that the allowfullscreen attribute is required for HTML5 players, but wondered if there’s a solution that will pass validation?

I can see that webkitallowfullscreen and mozallowfullscreen are no longer required: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

1 Answer
1

The class-oembed.php file reveals some of the available filters regarding the oEmbeds.

We can use the oembed_result or oembed_dataparse filters to modify the HTML fetched from Vimeo before it’s cached in the post meta. Here’s an example for the latter:

add_filter( 'oembed_dataparse', function( $return, $data, $url )
{
    // Target only Vimeo:
    if(
            is_object( $data ) 
        &&  property_exists( $data, 'provider_name' )
        &&  'Vimeo' === $data->provider_name
    )
    {
        // Remove the unwanted attributes:
        $return = str_ireplace(
            array( 
                'frameborder="0"', 
                'webkitallowfullscreen', 
                'mozallowfullscreen' 
            ),
            '',
            $return
        );
    }
    return $return;
}, 10, 3 );

Example:

Before:

<iframe src="https://player.vimeo.com/video/32001208" 
        width="584" 
        height="329" 
        frameborder="0" 
        title="Earth" 
        webkitallowfullscreen 
        mozallowfullscreen 
        allowfullscreen></iframe>

After:

<iframe src="https://player.vimeo.com/video/32001208" 
        width="584" 
        height="329"  
        title="Earth"   
        allowfullscreen></iframe>

Additional notes on xhtml:

If you check out the Vimeo oEmbed API, there’s a xhtml parameter with the default xhtml=false. You can try for example:

https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/32001208

vs.

https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/32001208&xhtml=true

So instead of: 

webkitallowfullscreen mozallowfullscreen allowfullscreen

we get:

 webkitallowfullscreen="webkitallowfullscreen" 
 mozallowfullscreen="mozallowfullscreen" 
 allowfullscreen="allowfullscreen"

If we want to aim for XHTML validation, we could try to modify this via the oembed_remote_get_args, for example. But I didn’t test that.

Leave a Comment