Can't style embedded videos properly due to inline width & height

[maddisondesigns]

Describe the bug
There's numerous issues open that discuss the inability to style various blocks so I'm not going to repeat all that again here. The only thing I will say is that we need the ability to specify the content width, and Wide width, at the very minimum.

When you insert a YouTube or Vimeo embed Block, it adds inline width and height to the iframe:

This causes the content to end up looking something like this (when you have Wide and Full videos):

Whilst its possible to override the width settings by doing something like .wp-block-embed.is-type-video iframe {width: 100%;}, this just makes it look even worse as we can't control the height and the vid just ends up looking squished.

There needs to be a better way to style these video embeds on the front-end.

To Reproduce
Steps to reproduce the behavior:

1. Add YouTube or Vimeo Embed
2. View inline iframe styles on front-end

Desktop (please complete the following information):

• macOS 10.12.6
• Firefox Quantum 61.0.1 (64-bit)
• Gutenberg 3.4.0

Some related issues:
#5650
#6131

[notnownikki]

This is an interesting one. In the editor we try to detect iframed content with a fixed width and height, and make it responsive while preserving the aspect ratio. On the front end though, the HTML put into the page is whatever oEmbed gives us, and so it'll have the fixed width and height. So that width and height is coming from YouTube or Vimeo's oEmbed API, not from Gutenberg.

How did we solve this in the classic editor? Was there javascript or different styles on the front end? Or did we strip out height and width?

[maddisondesigns]

@notnownikki Using the Classic Editor, Video Embeds still specify the width & height for the iframe. This is controlled by $content_width variable though, which we can adjust in the theme based on whether we're showing a page with a sidebar or a full width page (i.e. one without a sidebar).

It works in the Classic Editor because it's only dealing with one width, which is basically the same width that Gutenberg uses when you haven't selected the Wide or Full buttons.

Since Gutenberg is now allowing extra widths (i.e. the wide and full widths), it either (A) needs to let us supply those widths in the same way that we can specify $content_width or (B) It needs to automatically fix these hard-coded widths based on how the vid (or any embed) is getting embeded.

Basically, Gutenberg has introduced this issue by introducing the Wide and Full widths, so likewise, it also needs to provide a solution for it as well.

[notnownikki]

Thanks, that's filling in bits of the puzzle for me!

it either (A) needs to let us supply those widths in the same way that we can specify $content_width

I need to look more into the internals of how this works, but I'm pretty sure this is the way we need to go with things, because...

or (B) It needs to automatically fix these hard-coded widths based on how the vid (or any embed) is getting embeded.

... all the editor does when it saves an embed block is to put the URL on its own line, and oEmbed does the rest when the post is rendered, so by that point, Gutenberg isn't involved.

The bit about (A) that seems trickiest to me at the moment is that we wouldn't have a single content width for the post, so the problem becomes how we let oEmbed know that one bit of embedded content is $content_width, but another embed is $wide_width. I do think that (A) seems the way to go, and we should start discussions around this. Perhaps there would a post-oembed filter that fixes the widths...

@karmatosed, @jasmussen might have some input here?

[jasmussen]

Would it be a solution to provide two configurations for embedded video, perhaps as advanced settings in the sidebar?

• Option 1: Responsive & full-width (default)
  This would be what we have now — the video embed is as wide as the main column, and uses aspect-ratio CSS to make the video responsive.
• Option 2: Full-width
  This would basically be the same as what's in the classic editor — the full dimensions are output in the iframe like in the screenshot above, and perhaps we bundle the max-width CSS along with it. But it's not responsive beyond that, or it let's the theme itself handle that responsiveness.

Edit: Gutenberg might not have a $content_width variable, but given editor styles we can probably assume that the main content width (max-width: 100%) would be the same as the $content_width, no?

[notnownikki]

@jasmussen

Option 1: Responsive & full-width (default)

This would get 100% of my vote! However my CSS-fu hasn't been able to come up with anything that makes the embed 100% width and keeps the aspect ratio. It's not as simple as setting the iframe width to 100% and height to auto is it? I really want to see how this works :)

[jasmussen]

I could swear we had this working at one time, with CSS in place for it. Perhaps this regressed a bit? I can take a look next week.

The basic idea is that the video is 100% full wide. We then decide an assume an aspect ratio for the video, 16:9, and use that knowledge to use paddings to define the aspect ratio.

It's all in this pamphlet: http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Sidenote, it would be nice to expand this further so the user can choose the aspect ratio from a sidebar dropdown, like 1:1 (square) 4:3, etc.

I can take a look at this next week if it regressed.

[notnownikki]

Ah.

We can't assume an aspect ratio of 16:9 for video any more, because YouTube have started putting 4:3 videos in 4:3 aspect ratio. That's why the code in the embed block (which I think has regressed due to some style changes, but fundamentally works) gets the initial height and width and calculates an aspect ratio so that the iframe can resize correctly.

[jasmussen]

Oh that's interesting. I'll take a look next week and see how we can handle that.

[notnownikki]

Perhaps the embed block can get the aspect ratio (should be able to access to that information when it renders the preview) and set styles on the block so that the CSS can be told about the aspect ratio?

[jasmussen]

That would be sort of amazing. We'd have to work out the math to figure out the percentage, though, but that should be simple enough:

• To get a 1:1 aspect ratio, we have a 100% top padding
• To get a 2:1 aspect ratio, we have a 50% top padding
• To get a 1:2 aspect ratio, we have a 200% top padding
• To get a 4:3 aspect ratio, we have a 75% top padding
• To get a 16:9 aspect ratio, we have a 56.25% top padding

[notnownikki]

Yep, the HTML that would be embedded in the front end is available to the editor, so if we get the height and width from the iframe in the preview, we can calculate that and set the styles as needed and preserve the aspect ratio on the front end, no matter what the width is.