Hey there,
What you see in these screenshots is absolutely correct and hasn’t much to do with your theme and nothing to do with different WordPress versions. I’ll try to explain it to you:
Embeds are simple <iframe>
tags with some JavaScript. As a fallback for when JavaScript is not available or not yet loaded, a <blockquote>
is shown. As soon as the JS is loaded, the <blockquote>
gets replaced by the <iframe>
(which loads the content from the embedded site). That’s why the output changes after ~2s in your example: the JavaScript is being loaded.
Yes, the <blockquote>
has some styling thanks to your theme, but the <iframe>
will always be in the style of the embedded site. That’s how iframes work.
Of course one can remove the <iframe>
and only show the <blockquote>
, though I don’t see a compelling use case for that. Here’s how you could do it:
// Remove oEmbed-specific JavaScript
remove_action( 'wp_head', 'wp_oembed_add_host_js' );
/**
* Only allow blockquotes
*/
function custom_filter_pre_oembed_result( $result, $data, $url ) {
if ( false !== strpos( $result, 'wp-embedded-content' ) ) {
$allowed_html = array(
'a' => array(
'href' => true,
),
'blockquote' => array(
'class' => true
),
);
return wp_kses( $result, $allowed_html );
}
return $result;
}
add_filter( 'pre_oembed_result', 'custom_filter_pre_oembed_result', 11, 3 );
Note:
This code is untested. You need to disable this plugin for this code to work.