Videos embedded in the iframes are not scaling responsively due to the hardcoded width and height iframe attributes. So even if the inside iframe scales, the outer iframe's height doesn't. Some providers (such as Vimeo) handle the inner iframe video ok (but the container iframe height still remains fixed). Others, such as Youtube, have aspect ratio issues even inside the inner iframe. That's handled in #3060968: Some oEmbed videos do not maintain aspect ratio

A solution for this is a simple js script to calculate the aspect ratio on the fly and update the height of the iframe.

Comments

Upchuk created an issue. See original summary.

rosinegrean’s picture

rosinegrean commented
Issue tags: -@DevDaysTransylvania +DevDaysTransylvania
phenaproxima’s picture

phenaproxima
he/him
Primary language English
Location Massachusetts
commented
Issue tags: +oembed

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

martijn de wit’s picture

martijn de wit
Primary language Dutch
Location 🇳🇱 The Netherlands
commented

There is a contrib module that fixes this problem with an external library.

https://www.drupal.org/project/fitvids

----edit
If you want to use it, you have to add "/media/oembed?url=" as Additional video providers

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

phenaproxima’s picture

phenaproxima
he/him
Primary language English
Location Massachusetts
commented
Issue tags: +Media Initiative, +Triaged Media Initiative issue

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Anonymous’s picture

Anonymous (not verified) commented

Will this issue be fixed in D9 core?

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

rlnorthcutt’s picture

rlnorthcutt
he/him
commented

Actually, the solution may be even simpler than that. Instead of relying on fixed height and width settings, we can use the CSS aspect ratio property:

.video-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
}

The parent div will also need a 100% width, but once that is set, it should be turn key. No need for JS!

Perhaps the simplest thing to do is to provide another "Format" option for the field display. We have the current "oEmbed content" format, but we could create a "oEmbed responsive" one, which allows you to set the aspect ratio (with a default of 16/9). This means existing oEmbed media will not be affected, but users can easily make the change and get the benefit of responsive videos without needing to create custom templates, custom oEmbed providers, or use extra JS.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.