Video Embed Field
YouTubeやVimeoなどのサードパーティプロバイダーからの動画を表示するためのフィールドタイプを提供します。
video_embed_field
インストール
composer require 'drupal/video_embed_field:^3.0'
composer require 'drupal/video_embed_field:8.x-2.6'
概要
Video Embed Fieldは、外部の動画ホスティングサービスから動画を埋め込むための、シンプルながら強力なフィールドタイプを提供する包括的なDrupalモジュールです。動画URLを保存し、サムネイル、レスポンシブレイアウト、各種表示オプションを完全にサポートした埋め込み動画プレーヤーとしてレンダリングします。
プラグイン可能なプロバイダーアーキテクチャを採用しており、追加の動画ホスティングサービスのサポートを簡単に追加できます。組み込みサポートには、YouTube（YouTube ShortsやLive動画を含む）、YouTubeプレイリスト、Vimeoが含まれます。プロバイダープラグインシステムにより、開発者は他の動画サービス用のカスタムプロバイダーを作成できます。
主な機能として、動画プロバイダーからのサムネイル自動ダウンロード、複数の表示フォーマッター（埋め込み動画、サムネイル、遅延読み込み、Colorboxモーダル）、モバイルフレンドリーなレイアウトのためのレスポンシブ動画サポート、特定のタイムスタンプから動画を開始するためのタイムインデックスサポートがあります。また、権限ベースの自動再生制御も含まれており、管理者は特定のユーザーロールに対して自動再生を無効にできます。
追加のサブモジュールにより、メディアライブラリサポートのためのDrupalのMediaモジュールとの統合、WYSIWYGエディタで直接動画を埋め込むためのCKEditor5統合、古いDrupalバージョンからのアップグレードやコアのoEmbedへの移行のための移行ツールが提供されます。
Features
- YouTubeとVimeoからの動画URLを保存するための専用フィールドタイプを提供
- アノテーションを介してカスタムプロバイダーを追加できるプラグイン可能な動画プロバイダーシステム
- Image Style対応の動画プロバイダーからのサムネイル自動ダウンロードとキャッシュ
- 複数の表示フォーマッター：埋め込み動画プレーヤー、サムネイルのみ、遅延読み込み、Colorboxモーダル、プレーンURL
- 16:9のアスペクト比を維持しながらコンテナ幅に拡大縮小するレスポンシブ動画表示
- YouTubeサポートには通常の動画、YouTube Shorts、ライブストリーム、インデックスと開始動画パラメータ付きプレイリストを含む
- 特定のタイムスタンプから動画を開始するためのタイムインデックスサポート（例：?t=1m30s）
- YouTube字幕の言語設定サポート
- 特定のロールが自動再生動画を見ないようにする権限ベースの自動再生制御
- 許可されたプロバイダーからのURLのみを受け入れるフィールドバリデーション
- oEmbedデータからの動画タイトルとプロバイダー名を含むカスタマイズ可能な形式のtitle属性サポート
- video_embed_fieldメディアソースを提供するMediaモジュール統合
- 設定可能なデフォルト値でWYSIWYGエディタに直接動画を埋め込むためのCKEditor5統合
- Drupal 6のemfieldおよびDrupal 7のvideo_embed_fieldからのアップグレードのための移行サポート
- drushコマンドによるコアのoEmbedメディアへの移行パス
Use Cases
記事への動画コンテンツの追加
Articleコンテンツタイプに Video Embedフィールドを追加して、編集者がYouTubeやVimeoの埋め込み動画を含められるようにします。モバイルフレンドリーな表示のためにレスポンシブを有効にしたVideoフォーマッターを設定します。より良いユーザー体験のためにautoplayはfalseに設定します。
サムネイル付き動画ギャラリー
動画ギャラリー用に複数値のVideo Embedフィールドを持つコンテンツタイプを作成します。Thumbnailフォーマッターを使用してプロバイダーURLにリンクした動画サムネイルのグリッドを表示するか、Colorboxフォーマッターを使用してページを離れることなくモーダルオーバーレイで動画を開きます。
パフォーマンス最適化された動画ページ
複数の動画があるページやファーストビュー以下の動画にVideo (lazy load)フォーマッターを使用します。最初はサムネイルを表示し、ユーザーがクリックして再生するときのみ動画iframeを読み込むため、ページ読み込みパフォーマンスが大幅に向上し、帯域幅使用量が削減されます。
メディアライブラリ統合
video_embed_mediaサブモジュールを有効にして、メディアライブラリに動画を追加します。複数のコンテンツアイテムから参照できる再利用可能な動画メディアエンティティを作成します。メディアブラウザとEntity Embedを使用してリッチテキストコンテンツに動画を含めます。
WYSIWYGでの動画埋め込み
video_embed_wysiwygサブモジュールを有効にして、コンテンツ編集者がCKEditor5テキストフィールドに直接動画を埋め込めるようにします。テキストフォーマット設定でデフォルト設定を構成します。動画はエディタ内でサムネイルプレビュー付きでレンダリングされます。
アクセシビリティ重視の動画表示
認証済みユーザーや特定のロールに'never autoplay videos'権限を付与して、フォーマッター設定に関係なく自動再生を防止します。title_format設定を使用して、スクリーンリーダー用の説明的なiframeタイトルを提供します。
Drupal 7からの移行
組み込みの移行プラグインを使用して、Drupal 7からvideo_embed_fieldコンテンツを移行します。フィールドタイプ、フォーマッター、ウィジェットは自動的にマッピングされます。移行はDrupal 6のemfieldモジュールのコンテンツもサポートしています。
コアのoEmbedへの移行
プロバイダー非依存の埋め込みやより広範なフォーマットサポートなどの機能が必要な場合は、vem_migrate_oembedサブモジュールとdrush vem:migrate_oembedコマンドを使用して、video_embed_mediaからDrupalコアのoEmbed実装に移行します。
Tips
- すべての画面サイズで16:9のアスペクト比を維持するモバイルフレンドリーな動画表示にはresponsiveモードを使用
- よりユーザーフレンドリーな公開体験のために匿名ユーザーに'never autoplay videos'権限を付与
- タイムパラメータ（t=1m30s）付きのYouTube URLはサポートされており、そのタイムスタンプから動画が開始される
- YouTubeプレイリストでは、&v=パラメータを含めて最初に再生する動画を指定
- 複数の動画があるページではパフォーマンス向上のためにlazy loadフォーマッターを使用
- ProviderPluginBaseを拡張し@VideoEmbedProviderアノテーションを使用してカスタム動画プロバイダーを作成
- hook_preprocess_video_embed_iframe__youtubeを使用してmodestbrandingなどYouTube固有のパラメータをカスタマイズ
- 動画タイトルはoEmbed APIからキャッシュされる。プロバイダーで動画タイトルが変更された後にタイトルを更新するにはキャッシュをクリア
Technical Details
Admin Pages 1
/video-embed-wysiwyg/dialog/{filter_format}
CKEditor5で動画を埋め込むためのAJAXダイアログ。動画URLを入力し、エディタに挿入する前に表示設定を構成できます。
権限 1
Hooks 3
hook_preprocess_video_embed_iframe
動画iframeをプリプロセスして、プロバイダーに基づいてURL、クエリパラメータ、属性を変更したり、クラスを追加したりします。
hook_preprocess_video_embed_iframe__PROVIDER
プロバイダー固有のiframeプリプロセス。YouTubeのmodestbrandingを有効にするなど、特定のプロバイダーのクエリパラメータを変更できます。
hook_video_embed_field_provider_info_alter
video_embed_fieldプロバイダープラグイン定義を変更します。プロバイダーを削除したり、カスタム実装に置き換えたりするのに便利です。
Drush Commands 1
drush vem:migrate_oembed
video_embed_mediaコンテンツをコアのoEmbedメディアに移行します。メディアタイプをvideo_embed_fieldソースからoembed:videoに変換し、フィールドストレージをvideo_embed_fieldからstringに更新し、ビュー/フォーム表示をoEmbedフォーマッター/ウィジェットを使用するように更新します。
Troubleshooting 6
URLがサポートされているプロバイダー（YouTubeまたはVimeo）からのものであり、認識される形式であることを確認してください。フィールド設定で許可されているプロバイダーが制限されていないか確認してください。YouTubeはwatch、embed、youtu.be、shorts、liveのURL形式をサポートしています。Vimeoはvimeo.comとplayer.vimeo.comのURLをサポートしています。
サムネイルはファイルディレクトリ（デフォルト：public://video_thumbnails/）にダウンロードされます。このディレクトリのファイル権限を確認してください。プロバイダーのサムネイルURLが変更される場合があります。キャッシュをクリアしてコンテンツを再訪問し、サムネイルを再ダウンロードしてください。
閲覧しているユーザーが'never autoplay videos'権限を持っているか確認してください。ブラウザのポリシーも自動再生をブロックする場合があります。ほとんどのブラウザでは自動再生を機能させるために動画をミュートする必要があります。モジュールはautoplayが有効な場合、自動的に動画をミュートします。
Video Embed WYSIWYGフィルターは「URLをリンクに変換」の前、「許可されたHTMLタグを制限」の後に実行される必要があります。テキストフォーマット設定でフィルターの重みを確認してください。モジュールはフィルター順序をバリデーションし、設定が間違っている場合はエラーを表示します。
ColorboxフォーマッターはColorboxモジュールがインストールされ有効になっている場合のみ表示されます。composer require drupal/colorboxでインストールし、モジュールを有効にしてください。
入力されたURLがどのプロバイダーパターンにも一致しません。URLにタイプミスがないか確認してください。カスタムプロバイダーはプラグインシステムで追加できます。サポートされているURL形式についてはモジュールのドキュメントを参照してください。
Security Notes 5
- 動画はアップロードされたコンテンツではなく、プロバイダードメイン（youtube.com、vimeo.com）を指すiframeで埋め込まれる
- iframeのtitle属性はXSS攻撃を防ぐためにFormattableMarkupを使用してサニタイズされる
- 動画URLは受け入れられる前にプロバイダーパターンに対してバリデーションされる
- WYSIWYGフィルターはインジェクション攻撃を防ぐためにJSONトークンを解析し、レンダリング前に構造をバリデーションする
- サムネイルファイルはローカルファイルシステムにダウンロードされ、DrupalのImage Styleシステムを通じて提供される