Drupal 8:视频嵌入字段库加载彩色盒响应视频的顺序

Question

直截了当的问题:

是什么原因导致视频在使用Video Embed Field和Colorbox时响应？它是基于JavaScript库的正确加载顺序吗？或者也许它是在Video Embed Video模块中运行的东西？

关于我想要实现的目标的更长的解释/细节:

我正在构建一个Drupal 8站点,它有一个Media Bundle,我们称之为"卡片".卡片包含以下字段:

• 标题
• 图片
• 悬停文字
• YouTube视频

在默认状态下,用户可以看到标题和图像.悬停时,悬停文本覆盖在图像上.点击后,YouTube视频应启动到Colorbox模式.

我使用以下模块来解决这个问题:

• 媒体实体
• 媒体实体图片
• 视频嵌入字段
• 彩盒

我创建了Media Bundle w/Media实体和Media实体图像模块.我为YouTube视频字段的媒体包添加了视频嵌入字段.在Media Bundle的显示设置中,我将Video Embed Field设置为Colorbox并选中了Responsive Videos选项.

此时我确认我所有的田地都按照我的要求渲染.YouTube视频显示的是默认缩略图,而Colorbox模式工作正常 - 当可用宽度小于最大宽度配置时,它也会调整为更小.

现在我需要进行一些修改以获得标题,将文本和图像作为可点击区域的一部分来触发Colorbox.

我创建了一个自定义树枝模板来控制卡/媒体实体的显示.我注意到Video Embed Field能够基于类和"data-video-embed-field-modal"属性启动colorbox.所以我的计划是重新创建该结构并在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>

一切都按预期工作,但当窗口宽度小于最大宽度配置设置时,Colorbox/YouTube视频没有调整大小.当我将视频嵌入字段默认输出添加回树枝模板时,一切正常.代码是:

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