How to change default oEmbed width-height size in WordPress?

oEmbed is a feature that allows a simple URL to be shown as a beautiful embedded item. This can help in many ways to bloggers and website owners as users click more on such embeds more than a link.

In WordPress, this feature is available with similar WP blogs and multiple 3rd party services that allow embeds.

But the issue in WordPress is that the default width is set to 600 Pexels maximum and a blog or site with more width may show these embeds floating to the left side and may look ugly if the theme doesn’t support 100% width.

Thus in this tutorial, I’ll show how to change the default oEmbed heigh-width size in WordPress just by adding small code inside the active WordPress theme.

Change Dimensions of Embedded Elements

Just add the following code at the end of the theme’s functions.php file and once you save the file don’t forget to remove the cache if you are using any.

function atulhost_embed_defaults() {
	return array(
		'width'  => 840,
		'height' => 473
	);
}

add_filter( 'embed_defaults', 'atulhost_embed_defaults' );

Now we are done. Refresh the blog and get things working.

The problem with this method is that it only applies the width attribute if the embedded content doesn’t have ‘width’ and ‘height’ defined. If the embed code already includes width and height, then this method may not work.

If the theme doesn’t catch 100% width correctly then try modifying the following selectors in the style.css file. Just do not set height here because it can break the embedded content if it is uncontrollable from our end (like an iframe).

embed, iframe, object { width: 100%; }

I wish the solution will work for you, do let me know in the comments.