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!

Didn't get an answer here so I created a work around. I removed the loading of the libraries in the twig template and added the field I mentioned which loaded the JS files correctly: {{ content.field_you }} Then I simply hid the div and thumbnail that was created by that field with CSS. Not the best solution but the only way I could figure to accomplish the desired goal. — Pagri, Apr 11 '17 at 21:35

score 2 · Answer 1 · answered Feb 23 '17 at 00:13

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/

Thanks Liam - that is a neat CSS trick for responsive videos. I usually use fitvids.js for responsive YouTube videos. Unfortunately this doesn't help in my case. The issue is that the Colorbox modal has inline widths which make any responsive styling added to the video irrelevant. I believe that the video-embed-field.colorbox.js is somehow responsible for setting the width of that modal based on the settings and window width. — Pagri, Mar 01 '17 at 16:43

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

1 Answers1