slide-video

// src/components/patterns/story-slider/slide-video/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: patterns/story-slider/slide-video
type: object
required:
  - video
additionalProperties: false
properties:
  overline:
    type: string
  title:
    type: string
  video:
    format: html
    type: string
    description: elements/video

// src/components/patterns/story-slider/slide-video/mocks.yaml

video:
  $ref: elements/video#storyslider
  $tpl: elements/video
  classes:
    - StorySliderSlideVideo-video
$variants:
  - $name: With title
    title: Werde Monteur für eine führende Premium-Marke
  - $name: With title and overline
    title: Werde Monteur für eine führende Premium-Marke
    overline: Vorteile

// src/components/patterns/story-slider/slide-video/slide-video.twig

{% set label = "slide-video-" ~ random() %}

<section {% if title %} aria-labelledby="{{ label }}" {% endif %} aria-roledescription="slide" aria-brailleroledescription="sld" class="StorySliderSlideVideo StorySlider-content" role="group">
	{% include '@elements/video-custom-controls/video-custom-controls.twig' with {
		video: video,
		classes: ["StorySliderSlideVideo-video"],
	} only %}

	{%- if title -%}
		<div class="StorySlider-slideOverlay StorySliderSlideVideo-overlay">
			<h2 class="StorySliderSlideVideo-title" id="{{ label }}">
				{%- if overline -%}
					<span class="StorySlider-slideOverline">{{ overline }}</span>
					<span class="visually-hidden"> : </span>
				{% endif %}

				{{ title }}
			</h2>
		</div>
	{%- endif -%}
</section>