responsive_video_style

Introduction

Responsive Video Style adds breakpoint-based responsive video delivery to the Video Style ecosystem.

It provides a dedicated configuration entity for mapping breakpoints to Video styles and a field formatter that renders responsive video output for single-file media video source fields.

This module is the missing responsive layer on top of Video Style: the base module defines reusable styles and provider APIs, while Responsive Video Style decides which Video style should be used at which breakpoint.

Who this module is for

• Developers who need responsive video markup that fits provider capabilities cleanly.
• Site builders who want a Drupal-native way to configure mobile, tablet, and desktop video behavior.
• Product owners and content teams who want better performance and more appropriate video delivery across devices without maintaining one-off custom code per field or per template.

Features

• A responsive_video_style configuration entity
• An administration listing at /admin/config/media/video-styles/responsive
• A dedicated Responsive video style field formatter
• Breakpoint-to-Video-style mappings plus fallback styles
• Rendering that adapts to the selected provider strategy and render mode
• Optional poster support for native video output
• A bundled breakpoint group named Responsive Video with Mobile, Tablet, and Desktop

How it works

1. Create one or more Video styles in the base Video Style module.
2. Create a Responsive video style and select a breakpoint group and responsive strategy.
3. Map one or more Video styles to the relevant breakpoints and fallback section.
4. Configure the media video source field to use the Responsive video style formatter.
5. Select the desired Responsive video style.

The module then renders responsive output according to the provider strategy and the selected breakpoint mapping.

Responsive strategies

The architecture supports two responsive strategies.

• source: Providers contribute responsive <source> elements inside a single <video> tag. This fits providers that expose true alternative source URLs or derivatives per breakpoint.
• variant: Providers render separate video variants and the frontend shows one variant at a time depending on the configured breakpoint mappings and fallback styles. This fits providers where the style mainly changes player-level rendering rather than the actual media source.

All Video styles selected in one Responsive video style must match the chosen strategy and share the same render mode.

Current scope

The current first-alpha scope focuses on file-backed video delivery on media video source fields.

• single-file media video source fields
• native HTML5 video output for currently bundled providers
• ordered breakpoint mappings by breakpoint weight, similar to Drupal core’s Responsive Image concepts
• provider-requested derivatives and posters before read-side delivery resolution, so queue-backed providers can schedule work without hiding orchestration inside read paths

Why use this instead of one-off template logic?

Many Drupal sites solve responsive video delivery with ad hoc template conditions, custom preprocess code, or provider-specific hard-coding. That approach is hard to scale and hard to maintain.

Responsive Video Style moves this concern into reusable Drupal configuration, keeps rendering aligned with provider capabilities, and makes responsive video behavior understandable for both technical and non-technical stakeholders.

Ecosystem links

• Video Style — base module providing reusable Video styles, formatters, and provider APIs
• Video Style: ImageKit — ImageKit provider integration for the Video Style ecosystem

Installation and configuration

1. Install Video Style first.
2. Install this module as usual.
3. Create one or more Video styles.
4. Create a Responsive video style at /admin/config/media/video-styles/responsive.
5. Assign breakpoint mappings and fallback styles.
6. Configure the media video source field to use the Responsive video style formatter.

Roadmap

• Needed for a beta release

  • Broader test coverage for breakpoint mapping, strategy validation, and formatter behavior
  • Additional documentation and administrator-facing help text
  • More real-world testing with different provider modules and theme implementations
  • Further UX hardening for configuration workflows and validation edge cases

• Needed for a stable release

  • Resolved major and critical issues reported by the community
  • Stable expectations around responsive strategies and render mode compatibility
  • Production-oriented documentation for builders and developers
  • Confidence from broader adoption across real projects

• Additional 1.x goals

  • More breakpoint group options and ecosystem integrations
  • Further support for provider-rendered use cases
  • Expanded UX for responsive video administration

Support / community

Issue queue

Bug reports, feature requests, feedback, and architectural discussion.

Maintainer profile

For more about the maintainer and related Drupal work.

Maintainer

Software Architect & Developer Backend

Sponsorship

The initial implementation of this module was fully sponsored by Helga.

If you are interested in sponsoring additional features, provider integrations, hardening work, or long-term maintenance, please get in touch through the issue queue or maintainer profile.