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/

Drupal 8：视频嵌入色域响应视频的字段库加载顺序

1 个答案: