Drupal 8: Video Embed Field library load order for colorbox responsive video

Question

Straight to the real question:

What causes videos to be responsive when using Video Embed Field and Colorbox? Is it based on the correct load order of JavaScript libraries? Or perhaps is it something that runs within the Video Embed Video module?

The longer explanation / details on what I am trying to accomplish:

I am building a Drupal 8 site that has a Media Bundle we are calling "cards". Cards contain the following fields:

• Title
• Image
• Hover text
• YouTube video

In the default state, a user sees the Title and Image. On hover, the Hover text is overlaid on the Image. On click, the YouTube video should launch into a Colorbox modal.

I am using the following modules to pull this off:

• Media entity
• Media entity image
• Video Embed Field
• Colorbox

I have created the Media Bundle w/ the Media entity and Media entity image modules. I added a Video Embed Field to the Media Bundle for the YouTube video field. In the Media Bundle's display settings, I set the Video Embed Field as Colorbox and checked the option for Responsive Videos.

At this point I confirmed that all my fields were rendering as I desired. The YouTube video was displaying the default thumbnail and the Colorbox modal was working perfectly - it was also resizing to be smaller when the available width was less than the max-width configurations.

Now I needed to make some modifications to get the title, hover text and image as part of the clickable area to trigger the Colorbox.

I created a custom twig template to control the display of the card/media entity. I noticed that the Video Embed Field is able to launch the colorbox based on a class and "data-video-embed-field-modal" attribute. So my plan was to recreate that structure and embed the other fields I needed inside that div. Here is my twig template:

<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>

Everything is working as intended except the Colorbox / YouTube video are not resizing down when the window width is less than the max-width configuration setting. When I add the Video Embed Field default output back to the twig template, everything works properly. The code for that is:

{{ content.field_you }}

This led me to believe that the load order of the libraries was causing the problem.

Here is the load order when it works correctly:

<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>

Here is the load order when it doesn't work (ie when I don't have the default Video Embed Field rendering in the twig template):

<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>

Can someone confirm that this is the issue? If so, how can I change the load order of the JS files. Thanks in advance!

Answer 1

I'm not too sure on the drupal stuff, but perhaps this answers your question? Video/iframe elements can be made responsive simply with some little CSS trickery to size them vertically based on their parent container.

.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>

See this jsfiddle for an example: https://jsfiddle.net/hoxxep/M5u34/