3

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

5

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="//player.vimeo.com/video/32001208" 
        width="584" 
        height="329" 
        frameborder="0" 
        title="Earth" 
        webkitallowfullscreen 
        mozallowfullscreen 
        allowfullscreen></iframe>

After:

<iframe src="//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.

  • 1
    Works perfectly. A superb answer which I'm sure many people will benefit from. Thank you! – Sam Feb 17 '15 at 14:01
  • I used this solution, but it didn't work → screencast.com/t/Ql7njNlFIS5l Also this one → Error: Attribute gesture not allowed on element iframe at this point. Error: Attribute allows not allowed on element iframe at this point. – The WP Novice Dec 20 '17 at 20:56
  • @TheWPNovice The example I posted assumes Vimeo, but you're using Youtube. The oEmbed providers might be using different iframe attributes. so the example might need some adjustments. – birgire Dec 21 '17 at 8:30
  • @birgire, I am a novice sir. Thanks for replying. can you Please suggest the solution/recommendation. Help will be highly appreciable. – The WP Novice Dec 21 '17 at 15:09
  • We could try to adjust the 'Vimeo' === $data->provider_name part, I'm not able to test now but I would guess 'Youtube' === $data->provider_name ? If that works, then the next step would be to adjust the array in the str_ireplace() to match the problematic iframe attributes.. – birgire Dec 21 '17 at 23:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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