Some oEmbed videos do not maintain aspect ratio

Yeah I would love for this to be fixed.

@romulasry you can try the patch in #2966656-34: Negotiate max width/height of oEmbed assets more intelligently → to see if it resolves the issue for you.

@imclean don't have the time at the moment.

Modern browsers support the new aspect-ratio property. Example for a responsive 16:9 video iframe, with a very unobtrusive 0-0-1 CSS selector specifity:

iframe:where(.media-oembed-content) {
  display: block;
  width: 100%; 
  height: auto;
  aspect-ratio: 16 / 9;
}

#27 required additional `position: static;` override in `.contextual-region` in `web/themes/custom/
/css/components/embedded-media.pcss.css` when using Olivero subtheme to fix the node editing mode:

.field--name-field-media {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  /* Fix hidden video issue in editing mode, #35. */
  .contextual-region {
    position: static;
  }
}

#62 worked flawlessly with Drupal v `10.0.7`.

Re-roll. But I'm also testing out the css in #62.

When would you ever not want to maintain the intended original aspect ratio?

@jwilson3, this may change the size of embedded videos on existing sites when they upgrade.

I agree with @jwilson3 in #66. This should be default to always use the aspect ratio. That said, if there is no value set for this setting (on existing sites) it should remain off as mentioned in #67.

It's unfortunate that the default settings are always merged, this is why we can't have nice things *whines*.

It seems like this should be set the default for new installs and maybe we need an update hook to set it to FALSE for existing sites? Would that work?

A related issue which could resolve this issue has been committed to 10.3 and 11. I've added some screenshots of before and after for comparison. See #2966656-31: Negotiate max width/height of oEmbed assets more intelligently →

In a nutshell: oembed providers support maintaining aspect ratio at different sizes using query parameters maxwidth and maxheight. The above issue takes this into account so the width and height of the iframes will be set correctly.

So is this issue considered closed and what's linked by @imclean is the solution (setting a maxwidth and maxheight manually in the field display)?

FYI, the solution in #62 should not be the solution, as this affects all oEmbed iframes. I tested it out and my Podbean oembed was sized to 16/9 so there was now a huge whitespace gap up under the podcast player. May work fine for YouTube videos that happen to be 16/9, but not all videos will always be 16/9.

I'm using this css (copied from bootstrap 5):

.field--name-field-media-oembed-video {
  position: relative;
  width: 100%;
  &:before {
    display: block;
    padding-top: 56.25%; // 16x9
    content: "";
  }
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

Youtube is not only 16:9, we also have shorts now.

I think we can use the height/width in the oembed response to set the aspect ratio on either the iframe or container.

I don't really think it should be a style attribute, but here is a working proof of concept:

function HOOK_preprocess_media(&$variables) {
  $iframe_attributes = &$variables['content']['field_media_oembed_video'][0]['#attributes'];
  $height = $iframe_attributes['height'];
  $width = $iframe_attributes['width'];
  $iframe_attributes['style'] = "aspect-ratio: $width / $height; height: auto;" . $iframe_attributes['style'];
}

With this, the video can grow or shrink and the height is not a fixed size. You probably want a way to select whether it's displayed as full width or not by setting width: 100%;

Out of the box, the Remote video display is set to max height/width 0, which returns the defaults from the oembed provider.

That's pretty small for youtube, so set it to the max that you would want to display for your layout.

I set it to 1200 x 600. This means I can use a regular 16x9 video that will fill my 200px main column, or a short video that is narrow and max 600px tall.

A big question is whether the height/width values are reliable from the provider. Another is how to set overrides if desired.

For other oembed content, like codepen or spotify, I'd want settings like full width, fixed height, respect aspect ratio.

I think the way to implement this is to set a variable for aspect ratio and use that in .media-oembed-content.

I was able to add those as style options on embedded media, with notes from:
https://www.drupal.org/project/drupal/issues/3406020 ✨ Provide API for rerendering drupal-media through drupalElementStyles Needs work
https://www.drupal.org/project/drupal/issues/3117172#comment-15720466 ✨ [upstream] Allow CKEditor styles for Postponed

Currently we only have display modes to select these kinds of options for embedded content.

Just adding to the above conversation, I got around this by adding a field to media asking users to select what aspect ratio they want:

• default 16:9
• square 1:1
• vertical 4:5

I then themed as normal for my different display modes.