media-template

Information

Folder
src/components/elements/media-template

Files

Schema
Mocks
Template
// src/components/elements/media-template/media-template.html.twig

<figure class="Media{% if class %} {{ class }}{% endif %}">
  {% if youtube_id %}
    {% set iframe = {
      title: caption ? caption : "YouTube video player",
      src: "https://www.youtube-nocookie.com/embed/" ~ youtube_id ~ "?rel=0",
      width: 16,
      height: 9,
      additional_attributes: 'allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" referrerpolicy="strict-origin-when-cross-origin"'
    } %}
    {% include "@patterns/content-embed/content-embed.html.twig" with {
      type: "iframe",
      service: "youtube",
      allow_id: "ContentEmbed-allow_" ~ youtube_id,
      content_id: "ContentEmbed-content_" ~ youtube_id,
      deny_id: "ContentEmbed-deny_" ~ youtube_id,
      iframe: iframe,
      as_element: true,
      cover_image: cover_image,
    } only %}
  {% elseif image %}
    {{ image }}
  {% endif %}
  {% if legal or caption %}
    <figcaption class="Media-info u-typo-copy-small">
      {% if legal %}
        <p class="Media-legal">{{ legal }}</p>
      {% endif %}
      {% if caption %}
        <p class="Media-caption">{{ caption }}</p>
      {% endif %}
    </figcaption>
  {% endif %}
</figure>

Variants

Youtube video
Open

Youtube video mock data

Raw
Resolved
Youtube video with image overlay
Open

Youtube video with image overlay mock data

Raw
Resolved
Landscape image
Open

Landscape image mock data

Raw
Resolved
Landscape image full
Open

Landscape image full mock data

Raw
Resolved
Portrait image
Open

Portrait image mock data

Raw
Resolved
Portrait image full
Open

Portrait image full mock data

Raw
Resolved