video-embed

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

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

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

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

// src/components/elements/video-embed/video-embed.twig

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

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

      <p class="VideoEmbed-fallbackText">
        <strong>{{ title }}</strong><br>
        {{ "video.cookie_consent_text"|t }}
      </p>
    </div>
  </div>
{% endif %}