oEmbed videos are not fully responsive

Created on 12 June 2019, over 5 years ago
Updated 3 May 2023, over 1 year ago

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 πŸ› Some oEmbed videos do not maintain aspect ratio Needs work

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

πŸ› Bug report
Status

Needs work

Version

10.1 ✨

Component
MediaΒ  β†’

Last updated 4 days ago

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡ΊπŸ‡ΈUnited States rlnorthcutt Austin, TX

    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.

Production build 0.71.5 2024