Drupalの8：

Question

ストレート本当の問題にカラーボックス対応したビデオのためのビデオ埋め込みフィールドライブラリのロード順：ビデオ埋め込みフィールドやカラーボックスを使用するときに応答する動画を引き起こし何

？それはJavaScriptライブラリの正しいロード順に基づいていますか？それとも、ビデオ埋め込みビデオモジュール内で動作するものでしょうか？私が達成しようとしているかについて

長い説明/詳細：

私たちは「カード」と呼んでいるメディアバンドルを持っているのDrupal 8サイトを構築しています。カードには、次のフィールドが含まれています

• タイトルデフォルトの状態では
• 画像
• ホバーテキスト
• YouTubeの動画

、ユーザーはタイトルと画像を見ています。ホバーでは、ホバーテキストがイメージにオーバーレイされます。クリックすると、YouTube動画がカラーボックスモードに切り替わります。

私はこれをやってのけるには、以下のモジュールを使用しています：私はメディアを作成している

• メディアエンティティ
• メディア実体画像
• 動画を埋め込みフィールド
• カラーボックス

MediaエンティティとMediaエンティティイメージモジュールとのバンドル。私はYouTubeのビデオフィールドのMedia BundleにVideo Embedフィールドを追加しました。 Media Bundleのディスプレイ設定では、ビデオ埋め込みフィールドをカラーボックスに設定し、レスポンシブビデオのオプションをチェックしました。

この時点で、すべてのフィールドが私が望むようにレンダリングしていることが確認されました。 YouTubeのビデオにはデフォルトのサムネイルが表示されていて、Colorboxのモーダルは完全に機能していました。利用可能な幅が最大幅の設定よりも小さい場合、サイズが小さくなるようにサイズ変更されていました。

ここで、クリック可能な領域の一部としてタイトル、ホバーテキスト、画像を取得して、カラーボックスをトリガーするためにいくつかの変更を加える必要がありました。

カード/メディアエンティティの表示を制御するためにカスタムのtwigテンプレートを作成しました。私は、Video Embed Fieldがクラスと "data-video-embed-field-modal"属性に基づいてカラーボックスを起動できることに気付きました。だから私の計画は、その構造を作り直し、そのdivの中に必要な他のフィールドを埋め込むことでした。

<div{{ attributes }}> 
    {% if content %} 

    {#load libraries#} 
    {{ attach_library('colorbox/colorbox') }} 
    {{ attach_library('colorbox/init') }} 
    {{ attach_library('colorbox/default') }} 
    {{ attach_library('video_embed_field/colorbox') }} 
    {{ attach_library('video_embed_field/responsive-video') }} 

    <div class="{{ content.field_you.0['#attributes'].class.0 }}" data-video-embed-field-modal="{{ content.field_you.0['#attributes']['data-video-embed-field-modal'] }}"> 
     <div class="card-title">{{ name }}</div> 
     <div class="hover-wrapper"> 
     <div class="card-image">{{ content.field_card_image }}</div> 
     <div class="card-hovertext">{{ content.field_hover_text.0['#context'].value }}</div> 
     </div> 
    </div> 
    {% endif %} 
</div> 

すべてがウィンドウ幅は最大幅の構成設定よりも小さい場合にダウンリサイズされていないカラーボックス/ YouTubeのビデオを除いて意図したとおりに働いている：ここに私の小枝テンプレートがあります。私がビデオ埋め込みフィールドのデフォルト出力をtwigテンプレートに戻すと、すべて正常に動作します。そのコードは次のとおりです。

{{ content.field_you }} 

これは、ライブラリの読み込み順序が問題を引き起こしていると私に信じられました。それが正常に動作したときにここで

はロードオーダーである：それは（つまり、動作しない場合、私は小枝テンプレートのデフォルトのビデオ埋め込みフィールドのレンダリングを持っていないとき

ここ

<script src="/libraries/colorbox/jquery.colorbox-min.js?v=8.2.5"></script> 
<script src="/modules/contrib/colorbox/js/colorbox.js?v=8.2.5"></script> 
<script src="/modules/contrib/colorbox/styles/default/colorbox_style.js?v=8.2.5"></script> 
<script src="/modules/contrib/video_embed_field/js/video-embed-field.colorbox.js?okcv8e"></script> 

はロードオーダーであります）：

<script src="/libraries/colorbox/jquery.colorbox-min.js?v=8.2.5"></script> 
<script src="/modules/contrib/video_embed_field/js/video-embed-field.colorbox.js?okcvcl"></script> 
<script src="/modules/contrib/colorbox/js/colorbox.js?v=8.2.5"></script> 
<script src="/modules/contrib/colorbox/styles/default/colorbox_style.js?v=8.2.5"></script> 

誰かがこれが問題であることを確認できますか？もしそうなら、どのようにしてJSファイルのロード順を変更できますか？前もって感謝します！

Answer 1

私はdrupalのものについてはあまりよく分かりませんが、これはおそらくあなたの質問に答えますか？ビデオ/ iframe要素は、親コンテナに基づいて垂直方向にサイズを変更するために、少しCSSをトリッキーにするだけで、反応的にすることができます。

.vid-container { 
    position: relative; 
} 
.vid-dummy { 
    margin-top: 56%; /* this determines the aspect ratio */ 
} 
.vid-element { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

<div class="vid-container"> 
    <div class="vid-dummy"></div> 
    <iframe class="vid-element" src="https://www.youtube.com/embed/sNIEU2mVd0Q" frameborder="0" allowfullscreen></iframe> 
</div> 

例えば、このjsfiddleを参照してください：私は周りの仕事を作成したのでhttps://jsfiddle.net/hoxxep/M5u34/