video

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

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/video
additionalProperties: false
properties:
  subtitles:
    type: array
    items:
      additionalProperties: false
      type: object
      required:
        - language
        - src
      properties:
        default:
          type: boolean
        language:
          type: string
        src:
          type: string
          format: uri-reference
  src:
    type: string
    format: uri-reference
  width:
    type: number
  height:
    type: number
  type:
    type: string
  mobile:
    type: object
    properties:
      src:
        type: string
        format: uri-reference
      type:
        type: string
      width:
        type: number
      height:
        type: number
      poster:
        type: string
        format: uri-reference
    required:
      - src
      - width
      - height
  controls:
    type: boolean
  autoplay:
    type: boolean
  muted:
    type: boolean
  loop:
    type: boolean
  poster:
    type: string
    format: uri-reference
  classes:
    type: array
    items:
      type: string
  preload:
    type: string
    enum:
      - none
      - metadata
      - auto
  skip_cookiebot_consent:
    type: boolean
required:
  - src
  - width
  - height

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

src: >-
  https://player.vimeo.com/progressive_redirect/playback/891796525/rendition/1080p/file.mp4?loc=external&log_user=0&signature=c23879d11d0fd752c401813fd29f2b235b3e4dd22bef1691daad3460f7b566c7
poster: >-
  https://i.vimeocdn.com/video/1764648647-a47c942bb4960ea23b28eb2aedfd9d3d2620a2608b5b6df35827c7229a382b33-d?mw=1300&mh=732&q=70&quot
width: 768
height: 432
controls: true
muted: true
$variants:
  - $name: Mobile / Desktop
    mobile:
      width: 468
      height: 832
      src: >-
        https://player.vimeo.com/progressive_redirect/playback/891796525/rendition/1080p/file.mp4?loc=external&log_user=0&signature=c23879d11d0fd752c401813fd29f2b235b3e4dd22bef1691daad3460f7b566c7
      poster: >-
        https://i.vimeocdn.com/video/1764648647-a47c942bb4960ea23b28eb2aedfd9d3d2620a2608b5b6df35827c7229a382b33-d?mw=1300&mh=732&q=70&quot
    skip_cookiebot_consent: true
  - $name: Video with subtitles
    height: 1080
    skip_cookiebot_consent: true
    src: /build/assets/video/dummy/finstral-snippet-9-16.mp4
    subtitles:
      - default: true
        language: en
        src: /build/assets/video/dummy/finstral-snippet-en.vtt
      - language: de
        src: /build/assets/video/dummy/finstral-snippet-de.vtt
    width: 608
  - $name: Storyslider
    controls: true
    muted: true
    preload: metadata
    height: 1080
    skip_cookiebot_consent: true
    src: /build/assets/video/dummy/finstral-snippet-9-16.mp4
    subtitles:
      - default: true
        language: en
        src: /build/assets/video/dummy/finstral-snippet-en.vtt
      - language: de
        src: /build/assets/video/dummy/finstral-snippet-de.vtt
    width: 608
  - $name: Video slide decorative
    autoplay: true
    controls: false
    loop: true
    muted: true
    preload: auto
    height: 1080
    skip_cookiebot_consent: true
    src: /build/assets/video/dummy/finstral-snippet-9-16.mp4
    width: 608

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

{% set src_attribute = skip_cookiebot_consent ? "src" : "data-cookieblock-src" %}

<div class="Video-wrapper {% if classes %} {{ classes|join(' ') }} {% endif %}">
	{% if mobile is defined and mobile.src is defined and mobile.src is not empty %}
		<!-- [html-validate-disable-block no-autoplay] -->
		<video
			width="{{ mobile.width }}"
			height="{{ mobile.height }}"
			style="aspect-ratio: {{ mobile.width }} / {{ mobile.height }};"
			playsinline
			class="js-Video-asset Video-asset Video-asset--mobile
			{%- if class_prefix %} {{ class_prefix ~ "-asset" }}{% endif -%}"
			{%- if preload %} preload="{{ preload }}"{% endif -%}
			{%- if controls %} controls controlslist="nodownload" {% endif -%}
			{%- if autoplay %} autoplay{% endif -%}
			{%- if muted %} muted{% endif -%}
			{%- if loop %} loop{% endif -%}
			{%- if mobile.poster is defined %} poster="{{ mobile.poster }}"{% endif -%}
		>
			<source {{ src_attribute }}="{{ mobile.src }}" type="{{ mobile.type|default('video/mp4') }}">
			{%- if subtitles -%}
				{% for track in subtitles %}
					<track src="{{ track.src }}" srclang="{{ track.language }}" {%- if track.default -%} default {%- endif -%} />
				{% endfor %}
			{%- endif -%}
		</video>
	{% endif %}
	<!-- [html-validate-disable-block no-autoplay] -->
	<video
		width="{{ width }}"
		height="{{ height }}"
		style="aspect-ratio: {{ width }} / {{ height }};"
		playsinline
		class="js-Video-asset Video-asset
		{%- if class_prefix %} {{ class_prefix ~ "-asset" }}{% endif -%}"
		{%- if preload %} preload="{{ preload }}"{% endif -%}
		{%- if controls %} controls controlslist="nodownload" {% endif -%}
		{%- if autoplay %} autoplay{% endif -%}
		{%- if muted %} muted{% endif -%}
		{%- if loop %} loop{% endif -%}
		{%- if poster is defined %} poster="{{ poster }}"{% endif -%}
	>
		<source {{ src_attribute }}="{{ src }}" type="{{ type|default('video/mp4') }}">
		{%- if subtitles -%}
			{% for track in subtitles %}
				<track src="{{ track.src }}" srclang="{{ track.language }}" {%- if track.default -%} default {%- endif -%} />
			{% endfor %}
		{%- endif -%}
	</video>
	{% if not skip_cookiebot_consent %}
		<div class="Video-fallback cookieconsent-optout-marketing">
			<button
				class="Video-fallbackButton"
				aria-label="{{ "video.fallback_button"|tc }}"
				onclick="javascript:Cookiebot.renew()"
				type="button"
			></button>
			<p>{{ "video.cookie_consent_text"|tc }}</p>
		</div>
	{% endif %}
</div>