小编Pag*_*gri的帖子

直截了当的问题:

是什么原因导致视频在使用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> …