Iframe
Provides an iframe field type for Drupal, allowing content editors to embed external content via iframes with configurable dimensions, styling, and accessibility options.
iframe
Install
composer require 'drupal/iframe:^3.0'
composer require 'drupal/iframe:8.x-2.24'
Overview
The Iframe module creates a custom field type which lets you add complete iframes to your content types. It provides comprehensive control over iframe attributes including source URL, dimensions (width and height), optional title display, and various styling options.
The module supports responsive iframe behavior through CSS classes, dynamic height adjustment for same-origin iframes, and token replacement in URLs and titles. It integrates seamlessly with Drupal's Field API and provides multiple widget options for different content editing workflows.
Key capabilities include configurable frameborders, scrollbar control, transparency settings, and fullscreen permission management. The module also provides migration support from Drupal 7 and integration with the Feeds module for bulk content imports.
Features
- Custom iframe field type with URL, title, width, height, and CSS class properties
- Three widget variants: URL only, URL with height, and URL with width and height for flexible content editing
- Four display formatters: Title over iframe (default), iframe without title, link with title, and link with URI
- Responsive iframe support via 'iframe-responsive' CSS class with automatic aspect ratio calculation
- Auto-resize functionality for same-origin iframes using 'autoresize' CSS class
- Token support for dynamic URL and title values (requires Token module)
- Configurable accessibility options including header level (h1-h4) for iframe titles
- Frameborder, scrolling, and transparency styling options
- Fullscreen permission support via allow attribute and allowfullscreen boolean
- Comprehensive allow policy including accelerometer, autoplay, camera, encrypted-media, geolocation, gyroscope, microphone, payment, and picture-in-picture
- Drupal 7 to Drupal 8/9/10 migration support
- Feeds module integration for bulk iframe imports
- Mobile-responsive CSS with automatic width adjustment at 480px breakpoint
Use Cases
Embedding YouTube or Vimeo Videos
Add an iframe field to a content type to allow editors to embed video content. Use the 'URL with width and height' widget for flexible sizing. Set default dimensions appropriate for video (e.g., 560x315 for 16:9 ratio). Enable the iframe-responsive class for responsive video embeds that maintain aspect ratio on all screen sizes.
External Dashboard or Report Integration
Embed external dashboards, analytics reports, or third-party applications within Drupal content. Configure appropriate dimensions and enable scrolling if the embedded content may exceed the iframe size. Use token support to pass dynamic parameters like user IDs or date ranges in the iframe URL.
Interactive Maps and Location Content
Embed Google Maps, OpenStreetMap, or other mapping services. Enable fullscreen permission to allow users to expand maps for better navigation. Set appropriate default dimensions and consider using percentage-based width for responsive layouts.
Document Viewers
Embed PDF viewers, Google Docs, or Office Online documents. Configure scrolling as 'auto' to handle varying document lengths. Consider using the 'autoresize' class for same-origin document viewers to automatically adjust height to content.
Social Media Embeds
Embed social media widgets, Twitter timelines, or Facebook feeds. Use the iframe-responsive class for consistent display across devices. Configure transparency if the social widget should blend with your site's design.
Internal Application Integration
Embed internal web applications hosted on the same domain. Leverage the 'autoresize' CSS class to dynamically adjust iframe height based on content. This works only for same-origin iframes due to browser security restrictions.
Dynamic Content with Tokens
Create iframes with dynamic URLs using Drupal tokens. Enable tokensupport level 2 to allow tokens in both title and URL fields. Use tokens like [current-user:uid] or [node:nid] to personalize embedded content for each user or context.
Tips
- Use numeric values without units (e.g., '500' not '500px') for pixel dimensions, or include the % symbol for percentages
- Add the 'iframe-responsive' class to create aspect-ratio-based responsive iframes - width and height values become the ratio (e.g., 16 and 9 for 16:9)
- The 'autoresize' class enables automatic height adjustment but only works for same-origin iframes due to browser security policies
- For accessibility, set the appropriate header level (h1-h4) based on your page structure - default is h3
- Multiple CSS classes should be separated by spaces in the class field
- Token replacement disables caching for the iframe field - use sparingly on high-traffic pages
- The allow attribute automatically includes common permissions (camera, microphone, etc.) - fullscreen requires explicit enabling
- Set frameborder to 0 (default) for modern seamless integration, as CSS borders are preferred over HTML frameborder attribute
Technical Details
Hooks 2
hook_help
Provides help documentation for the iframe module on the admin help page.
hook_theme
Defines the iframe theme hook with available variables for template rendering.
Security Notes 6
- URL validation is performed using Drupal's Link module to prevent malicious URLs
- Token support should be used cautiously - level 2 (tokens in URL) could expose sensitive information if tokens contain user data
- The module strips HTML tags from title attributes to prevent XSS attacks
- Cross-origin iframes are subject to browser same-origin policy restrictions
- The allow attribute explicitly lists permitted capabilities - fullscreen requires separate enablement
- Consider Content Security Policy (CSP) headers when embedding external content via iframes