Allow oEmbed video iFrames to expand to available space

As all the modern browsers supports the aspect-ratio property. I have used the same and fixes the issue. please review

This will work for a 16/9 video - do we want to (or should we?) try to solve for other use cases? I don't know if there is a standard approach to a core theme, but either:

1 - We could add classes that allow for common video ratios, probably something like:

16:9 (Widescreen) 16:9
9:16 (Vertical) ...
1:1 (Square) ...
4:3 (Fullscreen) ...
21:9 (Cinematic Widescreen)

2 - We could look to calculate the ratio? I am aware of https://github.com/davatron5000/FitVids.js as jquery solution, and am also aware that jquery is no longer native in 9.x onwards. Is there a javascript approach in core that would help?

Of course these points are moot if its ok for the theme to be opinionated about 16/9 ratios being expected!

As mentioned in #4, this is a very rigid solution, but I don't think adding more, different rigid solutions is the answer. Instead, we probably want to access the iframe's set width/height. Those attributes are set here, but I'm not really sure how we would best make use of them. I'll reach out to the media maintainers to see if they have any input.

New patch attached with new approach that should be more flexible.

Could this be related ✨ Negotiate max width/height of oEmbed assets more intelligently Needs work

Yes, media using oEmbed in core isn't fully responsible and there are issues in certain scenarios dealing with dimensions (or lack of) that come from the providers. For example:

🐛 Some oEmbed videos do not maintain aspect ratio Needs work
🐛 oEmbed videos are not fully responsive Needs work
✨ Negotiate max width/height of oEmbed assets more intelligently Needs work

each focusing on one aspect of the same problem, IMO.

So ultimately, I believe this should be solved by the core media module in a generic way for all providers. Having that said, if in the meantime Olivero has a way to workaround it in a generic and simple way, maybe that's reasonable, and also serves as example of how sites can do it in their themes? We could leave a @todo in the workaround to remove it when the iframe is made fully responsible by the core module?

Also a little suggestion on the latest patch:

+++ b/core/themes/olivero/olivero.theme
@@ -359,6 +359,19 @@ function olivero_preprocess_radios(&$variables) {
+  if ($variables['entity_type'] === 'media' && $variables['field_name'] === 'field_media_oembed_video') {

This field can be named anything really. It would be great if we could target this in a more generic way. How about something like this instead?

  if (!empty($variables['element']['#object']) &&
    ($variables['element']['#object'] instanceof \Drupal\media\MediaInterface) &&
    ($variables['element']['#object']->getSource() instanceof \Drupal\media\Plugin\media\Source\OEmbedInterface)) {
    ...
  }

Thanks for the feedback, Marcos!

Moved to a MR because I hate making interdiffs.

Surprised the bot hasn't got this. But build failure in MR.

Also FWIW I'm reviewing ✨ Negotiate max width/height of oEmbed assets more intelligently Needs work right now too.

Trying to fix the CC Failed and improved one line of code.

Please review.

Added 1 comment to MR.

Can anyone confirm ✨ Negotiate max width/height of oEmbed assets more intelligently Needs work solve the problem.