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-custom-controls

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

title: Werde Monteur für eine führende Premium-Marke
overline: Vorteile
video:
  $ref: elements/video-custom-controls
  $tpl: elements/video-custom-controls
  classes:
    - StorySliderSlideVideo-video

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

<div class="StorySliderSlideVideo">
	{{ video|mira({
		classes: ["StorySliderSlideVideo-video"]
	}) }}

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

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