title: Drupal 8: Video Embed Field library load order for colorbox responsive video
body: <p><strong>Straight to the real question:</strong></p>
  
  <p>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?</p>
  
  <p><strong>The longer explanation / details on what I am trying to accomplish:</strong></p>
  
  <p>I am building a Drupal 8 site that has a Media Bundle we are calling "cards".  Cards contain the following fields:</p>
  
  <ul>
  <li>Title</li>
  <li>Image</li>
  <li>Hover text</li>
  <li>YouTube video</li>
  </ul>
  
  <p>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.</p>
  
  <p>I am using the following modules to pull this off:</p>
  
  <ul>
  <li>Media entity </li>
  <li>Media entity image</li>
  <li>Video Embed Field</li>
  <li>Colorbox</li>
  </ul>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>&lt;div{{ attributes }}&gt;
    {% 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') }}
  
      &lt;div class="{{ content.field_you.0['#attributes'].class.0 }}" data-video-embed-field-modal="{{ content.field_you.0['#attributes']['data-video-embed-field-modal'] }}"&gt;
        &lt;div class="card-title"&gt;{{ name }}&lt;/div&gt;
        &lt;div class="hover-wrapper"&gt;
          &lt;div class="card-image"&gt;{{ content.field_card_image }}&lt;/div&gt;
          &lt;div class="card-hovertext"&gt;{{ content.field_hover_text.0['#context'].value }}&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    {% endif %}
  &lt;/div&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>{{ content.field_you }}
  </code></pre>
  
  <p>This led me to believe that the load order of the libraries was causing the problem.</p>
  
  <p>Here is the load order when it works correctly:</p>
  
  <pre><code>&lt;script src="/libraries/colorbox/jquery.colorbox-min.js?v=8.2.5"&gt;&lt;/script&gt;
  &lt;script src="/modules/contrib/colorbox/js/colorbox.js?v=8.2.5"&gt;&lt;/script&gt;
  &lt;script src="/modules/contrib/colorbox/styles/default/colorbox_style.js?v=8.2.5"&gt;&lt;/script&gt;
  &lt;script src="/modules/contrib/video_embed_field/js/video-embed-field.colorbox.js?okcv8e"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>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):</p>
  
  <pre><code>&lt;script src="/libraries/colorbox/jquery.colorbox-min.js?v=8.2.5"&gt;&lt;/script&gt;
  &lt;script src="/modules/contrib/video_embed_field/js/video-embed-field.colorbox.js?okcvcl"&gt;&lt;/script&gt;
  &lt;script src="/modules/contrib/colorbox/js/colorbox.js?v=8.2.5"&gt;&lt;/script&gt;
  &lt;script src="/modules/contrib/colorbox/styles/default/colorbox_style.js?v=8.2.5"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Can someone confirm that this is the issue?  If so, how can I change the load order of the JS files.  Thanks in advance!</p>