Media Remote
Provides Media integration for remote content (non-OEmbed compliant) from various providers like Google Docs, Dropbox, Apple Podcasts, and more.
media_remote
Install
composer require 'drupal/media_remote:^1.10'
Overview
Media Remote is a Drupal module that enables embedding remote URL content that does not implement the OEmbed specification as Media items. While core Media handles OEmbed-compliant providers (listed in oembed.com/providers.json), many content providers use proprietary embedding methods that this module supports.
The module provides the scaffolding necessary to interact with Drupal's Media system, including a Media source plugin, URL validation, automatic media name derivation, and full integration with Media Library. Each supported provider has its own formatter that converts remote URLs into proper embed code snippets.
Key features include automatic URL validation with helpful error messages showing valid URL formats, automatic media name generation from URLs, customizable iframe dimensions for most providers, and complete Media Library integration for easy content management.
Features
- Media source plugin (Remote Media URL) for non-OEmbed content integration
- 20 provider-specific field formatters for converting URLs to embed codes
- Automatic URL validation with regex patterns and helpful error messages showing valid URL examples
- Automatic media name derivation from URL patterns
- Full Media Library integration with AJAX-enabled URL input form
- Customizable iframe dimensions (width/height) for most providers
- Provider-specific settings like Dropbox App Key configuration
- Twig templates for each provider allowing theme customization
- Automatic redirect to Manage Display after creating a Media Remote media type
Use Cases
Embedding Google Docs in Content
Create a Media Type with Remote Media URL source, configure the Google formatter on Manage Display with desired iframe dimensions, then add Google Docs/Sheets/Slides URLs via Media Library. URLs must be published (share URLs starting with docs.google.com/document/d/e/).
Podcast Aggregation Site
Create separate Media Types for different podcast providers (Apple Podcasts, Buzzsprout, Libsyn, Deezer, Stitcher). Each type uses the appropriate formatter. Content editors can easily add podcast episodes via URL without dealing with embed codes.
Enterprise Document Sharing
For organizations using Box or Dropbox, create Media Types with respective formatters. Dropbox requires an App Key from the Dropbox Developer Console. This allows easy embedding of cloud-hosted documents in Drupal content.
3D Model Showcase
Using the Matterport formatter, real estate or architecture sites can embed interactive 3D models. The formatter automatically adds required embed parameters to the URL.
Government/Journalism Document Publishing
Using the DocumentCloud formatter, journalism organizations can embed official documents with the DocumentCloud viewer, which provides document annotation and viewer features.
Educational Video Platform Integration
Educational institutions can use Panopto, Brightcove, or Loom formatters to embed lecture recordings and educational videos from their video platform of choice.
Interactive Maps and GIS Data
Using ArcGIS or Google Maps formatters, organizations can embed interactive maps, dashboards, and geographic data visualizations directly in their content.
Microsoft Forms Integration
Organizations using Microsoft 365 can embed Microsoft Forms for surveys and data collection directly in Drupal pages with customizable dimensions.
Tips
- After creating a Media Type with Remote Media URL source, you will be automatically redirected to Manage Display to configure the formatter - do not skip this step
- Always use published/share URLs from the content providers, not edit URLs
- For Dropbox integration, you must obtain an App Key from the Dropbox Developer Console and configure it in the formatter settings
- Each Media Type should use only one formatter - create separate Media Types for different providers
- Templates can be overridden in your theme for custom styling (e.g., mytheme/templates/media-remote-google.html.twig)
- The media variable is available in all templates for accessing the full media entity
- Width and height settings accept CSS units (px, %) for Matterport and Microsoft Forms formatters
- URL validation errors show valid URL examples to help content editors understand the expected format
Technical Details
Hooks 1
hook_form_media_type_add_form_alter
Alters the media type add form to inject a custom submit handler that redirects users to Manage Display after creating a Media Remote media type.
Troubleshooting 5
Navigate to the Manage Display page (/admin/structure/media/manage/[type]/display) and select a Media Remote formatter for the source field.
The error message includes valid URL examples. Ensure your URL matches the expected format exactly, including https:// prefix and required URL parameters.
You must configure a valid Dropbox App Key in the formatter settings. Visit developers.dropbox.com/embedder to create and manage your App Key.
Ensure you're using the published URL (File > Share > Publish to Web), not the edit or view URL. The URL must start with docs.google.com/document/d/e/.
Clear Drupal cache after changing formatter settings. Some formatters use CSS units (px, %) while others only accept pixel values.
Security Notes 3
- The module sanitizes width/height values using Html::escape() for formatters that accept arbitrary CSS units (Matterport, Microsoft Forms)
- URLs are validated against strict regex patterns before being used in templates
- Dropbox integration uses the official Dropbox Embedder API with App Key authentication