Responsive Video Style

Responsive Video Style maps Drupal breakpoints to reusable Video styles. It lets site builders configure different video sources or presentation settings for different viewport sizes, with explicit fallback styles.

Use the included field formatter for Drupal-rendered pages, or expose the responsive delivery structure through Drupal core REST and JSON:API for a decoupled frontend.

Features

• Reusable Responsive video styles managed through Drupal configuration.
• Breakpoint groups supplied by Drupal modules and themes, plus a bundled Mobile, Tablet and Desktop group.
• Ordered Video style mappings for each breakpoint and fallback output.
• A Responsive video style field formatter for file-backed video Media.
• Source-based output using one video element with multiple sources.
• Variant-based output with browser-side selection by media query.
• Playback and poster settings appropriate to the selected strategy.
• Continued delivery from usable sources when an individual provider derivative fails.
• Optional Responsive Video Style API submodule.
• Cache invalidation when responsive configuration or underlying delivery changes.

How it works

Create the underlying Video styles first, then combine them into a Responsive video style. Providers declare their supported strategy:

• Source: supplies alternatives within one video element. Multiple ordered styles can be selected per breakpoint and for fallback output. The ImageKit provider uses this strategy.
• Variant: supplies separate video variants selected by media query, with one style per breakpoint and one default fallback. The Local file provider uses this strategy.

Selected Video styles must use the chosen strategy and a compatible render mode. Responsive configuration does not itself transcode video; available transformations depend on the underlying providers.

Getting started

1. Install with composer require drupal/responsive_video_style and enable Responsive Video Style. Composer installs the required Video Style dependency.
2. Create the Video styles you want to combine.
3. Open Configuration → Media → Video styles → Responsive video styles (/admin/config/media/video-styles/responsive).
4. Select a breakpoint group and strategy, then configure mappings and fallbacks.
5. For Drupal-rendered output, select the Responsive video style formatter on the video Media source field.

REST and JSON:API

Enable Responsive Video Style API (responsive_video_style_api), which depends on Video Style API, and configure your preferred core transport and Media access. REST additionally requires its Media GET resource with JSON format to be enabled.

Select Expose through APIs on a Responsive video style to make it available in the read-only responsive_video_styles Media field. Its constituent Video styles do not need separate exposure unless you also want them available individually.

Responses include ordered sources or variants, media queries, playback settings, posters and constituent delivery states. The frontend implements playback and responsive selection using that structure.

Asset preparation uses the shared warming command, queues and optional preparation-on-Media-save setting from Video Style API. Exposure and automatic preparation default off. API reads never initiate preparation.

Scope and GraphQL

The formatter and API fields support Media using Drupal core's Video file source with a single-value file source field. Remote-video/oEmbed Media is outside this scope.

GraphQL integration is not included. A schema integration is required to expose responsive video delivery through GraphQL.

Documentation and related projects

• Configuration and developer documentation
• REST and JSON:API setup
• Video Style
• Video Style: ImageKit
• Issue queue for bug reports, feature requests and support.

Maintainer

David Pacassi Torrico (dpacassi) Software Architect & Developer Backend