oembed_responsive

This module provides a lightweight solution to make Drupal's core Media oEmbed iframes responsive. By default, Drupal's oEmbed display formatter renders iframes with fixed dimensions, which can break layouts on smaller screens or fail to fill the available width on larger containers. This module applies CSS to ensure iframe.media-oembed-content elements take up 100% of their container's width while maintaining a 16:9 aspect ratio.

REQUIREMENTS

• Drupal Core: 10.x or 11.x
• Media: This module relies on the core Media module (standard in Drupal installs).

INSTALLATION

Install as you would normally install a contributed Drupal module. Visit: https://www.drupal.org/node/1897420 for further information.

CONFIGURATION

This module requires no configuration.

Once enabled, it globally attaches a CSS library that targets iframes with the class .media-oembed-content.

The applied styles are:

iframe.media-oembed-content {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
}

How it Works

The module implements hook_page_attachments() to inject a small CSS file into every page load. This CSS forces the oEmbed iframe to respond to the width of its parent container using modern CSS aspect-ratio property.

Troubleshooting

My video is not 16:9

Currently, this module enforces a 16:9 aspect ratio, which is standard for most YouTube and Vimeo content. If you need to support other aspect ratios (like 4:3 or 1:1), you may need to override the CSS in your theme or submit a patch to this module to allow configuration.

The styles are not applying

1. Ensure the module is enabled.
2. Clear the Drupal cache (drush cr).
3. Inspect the iframe element in your browser's developer tools. Ensure it has the class media-oembed-content. If your theme or a custom template removes this class, the selectors will not match.

Support development on this module

A lot of hard work and dedication has gone into developing this module. If you find it helpful and would like to support ongoing development, consider buying me a coffee! Your support helps ensure that I can continue enhancing and maintaining this module for everyone. Thank you for your generosity!