Remove frameborder attribute from iframes

Question

The W3C Validator outputs an error because Wordpress adds frameborder="0" to iframes. Also the Validator does not like the allow attribute.

I found a similar question for Vimeo Videos: WordPress oEmbed W3C Validation. However, I couldn't get it to work.

That's the code I added to the function.php file which however does not work:

add_filter( 'oembed_dataparse', function( $return, $data, $url )
{
    if( is_object( $data ) )
    {
        // Remove the unwanted attributes:
        $return = str_ireplace(
            array( 
                'frameborder="0"'
            ),
            '',
            $return
        );
    }
    return $return;
}, 10, 3 );

That's what the source code fragment looks like:

<iframe width="500" height="281" src="https://www.youtube.com/embed/qUi422H0sx0?feature=oembed" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>

And does anyone know for the second error with allow: Can it be just removed like the frameborder or is there an html5 version of it?

Answer 1

WordPress doesn't add the frameborder attribute. YouTube does. It's part of their embed code.

If you absolutely must remove it you can use the embed_oembed_html filter to modify the returned HTML:

function wpse_308247_remove_frameborder( $html, $url ) {
    // If the URL to be embedded is from YouTube.
    if ( strpos( $url, 'youtube.com' ) !== false ) {
        // Replace the frameborder attribute with an empty string.
        $html = str_replace( 'frameborder="0"', '', $html );
    }

    return $html;
}
add_filter( 'embed_oembed_html', 'wpse_308247_remove_frameborder', 10, 2 );

But here's the thing: you don't get anything special for avoiding errors in the validator. What's important is understanding the errors and what issues they might cause, not trying to remove every single warning or error without context.

With that in mind, the frameborder attribute is likely just added by Google for backwards compatibility with older versions of HTML and it won't cause any negative effects just by being there. I don't think it's worth the effort to remove it.

The allow attribute is a different situation. It seems to be for supporting Chrome specific features. So while it's invalid HTML, it still has a purpose. It is similar to the frameborder attribute though in that leaving it there won't cause any problems.