如何在Media远程视频模板中显示视频字幕？

我创建了Media Video Remote模板，使用CKEditor嵌入视频时勾选了“Caption”复选框，但当前模板无法显示字幕。以下是我的media--remote-video--default.html.twig代码：

{%
  set classes = [
    'media',
    'media--type-' ~ media.bundle()|clean_class,
    not media.isPublished() ? 'media--unpublished',
    view_mode ? 'media--view-mode-' ~ view_mode|clean_class,
  ]
%}
<div{{ attributes.addClass(classes) }}>
  {{ title_suffix.contextual_links }}
  {% if content %}
    <div id="youtube-remote">
      <a href="{{ content.field_media_oembed_video.0 }}" target="_blank">
        <div class="youtube-remote-container">
          <img src="{{ content.thumbnail.0 }}" width="1280" height="720" alt="" loading="lazy">
          <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 68 48">
            <path class="play-outer" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"/>
            <path d="M 45,24 27,14 27,34" fill="white"/>
          </svg>
        </div>
        HERE FIGCAPTION ......................
      </a>
    </div>
  {% endif %}
</div>

CKEditor嵌入远程视频时设置的“Caption”会自动映射到媒体实体的标题字段，只需在模板中调用该字段即可显示字幕。以下是修改后的完整模板代码：

{%
  set classes = [
    'media',
    'media--type-' ~ media.bundle()|clean_class,
    not media.isPublished() ? 'media--unpublished',
    view_mode ? 'media--view-mode-' ~ view_mode|clean_class,
  ]
%}
<div{{ attributes.addClass(classes) }}>
  {{ title_suffix.contextual_links }}
  {% if content %}
    <div id="youtube-remote">
      <a href="{{ content.field_media_oembed_video.0 }}" target="_blank">
        <div class="youtube-remote-container">
          <img src="{{ content.thumbnail.0 }}" width="1280" height="720" alt="{{ media.name.value|default('') }}" loading="lazy">
          <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 68 48">
            <path class="play-outer" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"/>
            <path d="M 45,24 27,14 27,34" fill="white"/>
          </svg>
        </div>
      </a>
      {# 渲染视频字幕 #}
      {% if media.name.value %}
        <figcaption class="video-caption">{{ media.name.value }}</figcaption>
      {% endif %}
    </div>
  {% endif %}
</div>

关键修改说明： #

1. 将字幕标签<figcaption>移到<a>标签外部，避免点击字幕时触发视频跳转
2. 使用media.name.value获取CKEditor设置的字幕内容（这是Drupal默认的映射逻辑）
3. 为图片的alt属性填充字幕内容，提升页面可访问性
4. 添加video-caption类，方便通过CSS自定义字幕样式

如果你的媒体类型创建了专门的字幕字段（例如field_media_caption），可以将media.name.value替换为{{ content.field_media_caption }}来调用对应字段。

内容的提问来源于stack exchange，提问作者francky