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):

Subscribe
Notify of
guest
4 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Celio Miranda
Celio Miranda
4 months ago

I liked the solution. My videos on the Builder Oxygen posts were not responsive. I tried the step by step using fluidvids. It also didn't work. Your solution is spectacular. Congratulations.

Trablogger
4 months ago

This solution looks great. Very creative one. But what happens to all the previously added videos? Shouldn't we have to go back and edit them all to make this solution work?

Julieanne Gee
Julieanne Gee
5 days ago

Thanks! This worked like a charm! I'd already added a ton of videos to my staging site and didn't want to have to edit every single one, so I used your CSS and then added your video container by doing 2 mass search and replace queries across my site to add the container at the beginning and end of every instance of a youtube iframe.

James Clark
Hi! I'm James Clark and this is my website. Need help with your own website's analytics, SEO, content or ads? Contact me
Copyright © James Clark
4
0
What do you think? Leave a commentx
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram