URL Embed

テキストエディタ（CKEditor5）またはリンクフィールドを使用してURLを埋め込むことができます。YouTube、Flickr、Instagram、FacebookなどのoEmbed対応サービスをサポートしています。

url_embed
4,315 sites
52
drupal.org
gui api field integration
embed URL oembed media WYSIWYG ckeditor5 youtube video social media integration text filter field formatter
Drupal 10 Drupal 11

インストール

Drupal 11, 10 v3.0.0
composer require 'drupal/url_embed:^3.0'

概要

URL Embedモジュールは、外部URLをDrupalコンテンツに埋め込むための包括的なソリューションを提供します。強力なoscarotero/Embed PHPライブラリを活用して、YouTube、Vimeo、Flickr、Twitter、Instagram、Facebookなど、数百のサポートされたプロバイダーからoEmbedデータを取得します。

このモジュールはCKEditor5とシームレスに統合され、ユーザーが埋め込むURLを貼り付けるダイアログを開くツールバーボタンを追加します。コンテンツが表示される際、モジュールのテキストフィルターが<drupal-url>プレースホルダータグを、動画プレーヤー、画像ギャラリー、ソーシャルメディア投稿などのリッチな埋め込みコンテンツに変換します。

さらに、URL EmbedはLinkフィールド用のフィールドフォーマッターを提供し、WYSIWYGエディタを必要とせずに、リンクフィールドが使用されている場所であればどこでも埋め込みコンテンツを表示できます。このモジュールは、正しいアスペクト比を維持しながらコンテナに合わせて自動的にスケーリングするレスポンシブ埋め込みもサポートしています。

Features

  • WYSIWYGコンテンツにURLを埋め込むためのツールバーボタンを備えたCKEditor5統合
  • <drupal-url>タグをリッチな埋め込みコンテンツに変換する「埋め込みURLを表示」テキストフィルター
  • プレーンURLを自動検出して埋め込み要素に変換する「URLをURL埋め込みに変換」テキストフィルター
  • URLを埋め込みコンテンツとして表示するLinkフィールド用フィールドフォーマッター
  • CSSベースのアスペクト比保持によるレスポンシブ埋め込みサポート
  • Facebook App認証情報の設定によるFacebookとInstagramの埋め込みサポート
  • hook_url_embed_options_alterを通じて他のモジュールが埋め込みオプションを変更できる拡張可能なアーキテクチャ
  • oscarotero/Embedライブラリによる数百のoEmbedプロバイダーのサポート

Use Cases

コンテンツにYouTube動画を埋め込む

コンテンツ編集者は、CKEditor5のURL Embedボタンをクリックし、YouTubeのURLを貼り付けて「埋め込み」をクリックするだけで、簡単にYouTube動画を埋め込むことができます。動画プレーヤーは適切なレスポンシブスケーリングでコンテンツ内にインラインでレンダリングされます。

ソーシャルメディア投稿を表示する

Twitter/Xの投稿、Instagramの写真、またはFacebookのコンテンツを記事に直接埋め込みます。InstagramとFacebookの場合は、まずモジュール設定でFacebook App認証情報を設定してください。

Linkフィールドを埋め込みコンテンツとして表示

Linkフィールドで「埋め込みURL」フィールドフォーマッターを使用して、URLを埋め込みコンテンツとして表示します。例えば、「注目の動画」リンクフィールドをプレーンなリンクではなく動画プレーヤーとして自動的に表示できます。

ユーザーコンテンツ内のURLを自動変換

「URLをURL埋め込みに変換」フィルターを有効にして、ユーザー投稿コンテンツ内のプレーンURLを自動的に埋め込みメディアに変換します。オプションで「EMBED-」のようなプレフィックスを使用して、どのURLを変換するかを制御できます。

レスポンシブメディアギャラリー

レスポンシブ埋め込みを有効にして、すべての埋め込みメディアがモバイルデバイスや異なる画面サイズで正しいアスペクト比を維持しながら適切にスケーリングされるようにします。

Tips

  • 埋め込みマークアップが削除されないように、フィルター処理順序で「埋め込みURLを表示」フィルターを「許可するHTMLタグを制限」の後に配置してください。
  • 「URLをURL埋め込みに変換」フィルターで「EMBED-」のようなURLプレフィックスを使用して、コンテンツ編集者がどのURLを埋め込みにするかを制御できるようにしてください。
  • デフォルトのアスペクト比設定（66.7%）は3:2の比率に近似しています。16:9の動画コンテンツには56.25%を使用してください。
  • 公開前にCKEditor5のプレビュー機能を使用するか、下書きモードで表示して埋め込みURLをテストしてください。
  • トラフィックの多いサイトでは、各ページビューで新しいoEmbedデータを取得する可能性があるため、埋め込みコンテンツのキャッシュ戦略を検討してください。

Technical Details

Admin Pages 1
URL Embed /admin/config/media/url_embed

URL Embedモジュールの設定ページです。主に2020年10月以降、FacebookとInstagramのコンテンツを埋め込むために必要なFacebook App認証情報の設定に使用されます。

権限 1
URL Embedモジュールを管理

ユーザーがFacebook App認証情報を含むURL Embed設定にアクセスして変更できるようにします。

Hooks 1
hook_url_embed_options_alter

モジュールがoEmbedプロバイダーに送信される前の埋め込みリクエストに渡されるURLまたはオプションを変更できるようにします。プロバイダーごとに埋め込み動作をカスタマイズするのに便利です。

Troubleshooting 5
FacebookまたはInstagramの埋め込みが機能しない

FacebookとInstagramは2020年10月以降、oEmbed製品を有効にしたFacebook Appが必要です。developers.facebook.comでアプリを作成し、oEmbed製品を有効にして、/admin/config/media/url_embedでApp IDとApp Secretを入力してください。アプリは「ライブ」モードである必要があります。

CKEditor5に埋め込みボタンが表示されない

/admin/config/content/formatsでテキストフォーマットのツールバー設定に「urlembed」ボタンを追加していることを確認してください。また、そのテキストフォーマットで「埋め込みURLを表示」フィルターが有効になっていることも確認してください。

URLが埋め込まれず、プレースホルダーまたは何も表示されない

すべてのURLがoEmbedをサポートしているわけではありません。URLはoscarotero/Embedライブラリがサポートするプロバイダーのものである必要があります。具体的なエラーメッセージについては、ブラウザコンソールとDrupalログを確認してください。

埋め込みコンテンツがレスポンシブにならない

テキストフィルター設定またはフィールドフォーマッター設定で「埋め込みをコンテナに合わせる（レスポンシブ動作）」オプションを有効にしてください。また、url_embed/responsive_stylesライブラリのCSSが読み込まれていることを確認してください。

埋め込みコンテンツからHTMLタグが削除される

「許可するHTMLタグを制限」フィルターを使用している場合は、許可されたタグリストに<drupal-url data-embed-url data-url-provider>があることを確認してください。「埋め込みURLを表示」フィルターはHTML制限フィルターの後に実行される必要があります。

Security Notes 3
  • Facebook App SecretはDrupal設定にプレーンテキストで保存されます。設定エクスポートと管理ページへのアクセスを制限してください。
  • 埋め込みコンテンツはoEmbedプロバイダーからの生のHTMLを使用してレンダリングされます。oEmbedプロバイダーは信頼されているため一般的に安全ですが、外部スクリプトが読み込まれる可能性があることに注意してください。
  • 「administer url_embed」権限はAPI認証情報の設定を許可するため、信頼された管理者にのみ付与する必要があります。