- πΊπΈ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.