video

// src/components/elements/video/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /elements/video
additionalProperties: false
type: object
required:
  - title
  - url
properties:
  title:
    type: string
  url:
    type: string
    format: uri-reference
  skip_cookiebot_consent:
    type: boolean

// src/components/elements/video/mocks.yaml

title: iPhone X
url: https://player.vimeo.com/video/238480244

// src/components/elements/video/video.twig

{% if skip_cookiebot_consent %}
  <div class="Video">
    <iframe
        class="Video-embed"
        title="{{ title }}"
        src="{{ url }}"
        allow="autoplay; fullscreen; picture-in-picture"
        allowfullscreen
    ></iframe>
  </div>
{% else %}
  <div class="Video">
    <iframe
      class="Video-embed"
      title="{{ title }}"
      data-cookieblock-src="{{ url }}"
      data-cookieconsent="marketing"
      allow="autoplay; fullscreen; picture-in-picture"
      allowfullscreen
    ></iframe>

    <div class="Video-fallback cookieconsent-optout-marketing">
      <button
        class="Video-fallbackButton"
        aria-label="{{ "Play video"|t }} {{ title }}"
        onclick="javascript:Cookiebot.renew()"
      >
        {% include "@elements/icon/icon.twig" with {
          name: "play",
        } only %}
      </button>

      <p class="Video-fallbackText">
        <strong>{{ title }}</strong><br>
        {{ "Please accept marketing cookies to play this video."|t }}
      </p>
    </div>
  </div>
{% endif %}