Embedding YouTube video with Oxygen WordPress sites (or, why is my video displaying at 500px max?)

2 November 2019

Embedding a YouTube video in WordPress is easy - just paste a YouTube video URL into a post or page on a line of its own. WordPress will use the oEmbed protocol to turn the URL into a video embed. The video will also be responsive (in other words, display at a smaller size on smaller screens).

But depending on your WordPress site, you may find that the embedded video has a maximum width of 500px. This was certainly the case when I tried embedding a video into my WordPress website built with Oxygen Builder. Whether I used the WordPress Classic Editor or the Block Editor (with the YouTube block or the video block), the embedded video had a max width of 500px. But why?

It turns out that it relates to something called Content Width. The WordPress codex says:

Content Width is a theme feature, first introduced in Version 2.6. Using this feature you can set the maximum allowed width for any content in the theme, like oEmbeds and images added to posts.

Using this theme feature, WordPress can scale oEmbed code to a specific size (width) in the front-end, and insert large images without breaking the main content area.

Without a defined Content Width, the default is 500px. Oxygen websites do not use themes, so default to this size. So what should you do if you want an embedded video to display at larger than 500px wide on an Oxygen site?

There are at least two options:

Edit with Oxygen

The simplest solution is to 'Edit with Oxygen' and then add a Video component to the post or page. Videos added this way default to the width of their parent element (though it is also possible to give them a specific size or max size).

Don't forget to specify your YouTube URL in the 'YouTube / Vimeo URL field' under Primary settings. Otherwise else you will get Rickrolled:

Videos in Oxygen

Use CSS

But what if you want to embed a responsive video at wider than 500px without using 'Edit with Oxygen' and without defining a Content Width? That's also possible, but you will need to add some CSS to your website's stylesheet (taken from here):

Then, when you add your YouTube link, wrap it in a paragraph tag with the class of 'video-container'. Like this:

And your video will appear as follows (if my live example works):

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © James Clark
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram