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
12,918 sites
39
drupal.org
field
field iframe embed external content responsive accessibility media
Drupal 8 Drupal 9 Drupal 10 Drupal 11

インストール

Drupal 11, 10 v3.0.0
composer require 'drupal/iframe:^3.0'
Drupal 9, 8 v8.x-2.24
composer require 'drupal/iframe:8.x-2.24'

概要

Iframeモジュールは、コンテンツタイプに完全なiframeを追加できるカスタムフィールドタイプを作成します。ソースURL、サイズ（幅と高さ）、オプションのタイトル表示、さまざまなスタイルオプションなど、iframe属性を包括的に制御できます。

このモジュールは、CSSクラスによるレスポンシブiframe動作、同一オリジンiframeの動的な高さ調整、URLとタイトルでのToken置換をサポートしています。DrupalのField APIとシームレスに統合され、さまざまなコンテンツ編集ワークフローに対応する複数のウィジェットオプションを提供します。

主な機能には、設定可能なフレームボーダー、スクロールバー制御、透過設定、フルスクリーン許可管理が含まれます。また、Drupal 7からの移行サポートとFeedsモジュールとの統合による一括コンテンツインポートも提供します。

Features

  • URL、タイトル、幅、高さ、CSSクラスプロパティを持つカスタムiframeフィールドタイプ
  • 柔軟なコンテンツ編集のための3つのウィジェットバリエーション：URLのみ、URLと高さ、URLと幅・高さ
  • 4つの表示フォーマッター：iframe上にタイトル（デフォルト）、タイトルなしiframe、タイトル付きリンク、URI付きリンク
  • 'iframe-responsive' CSSクラスによるレスポンシブiframeサポートと自動アスペクト比計算
  • 'autoresize' CSSクラスを使用した同一オリジンiframeの自動リサイズ機能
  • 動的なURLとタイトル値のためのTokenサポート（Tokenモジュールが必要）
  • iframeタイトルのヘッダーレベル（h1-h4）を含む設定可能なアクセシビリティオプション
  • フレームボーダー、スクロール、透過のスタイルオプション
  • allow属性とallowfullscreenブール値によるフルスクリーン許可サポート
  • accelerometer、autoplay、camera、encrypted-media、geolocation、gyroscope、microphone、payment、picture-in-pictureを含む包括的なallowポリシー
  • Drupal 7からDrupal 8/9/10への移行サポート
  • 一括iframeインポートのためのFeedsモジュール統合
  • 480pxブレークポイントでの自動幅調整を備えたモバイルレスポンシブCSS

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