video-custom-controls

// src/components/elements/video-custom-controls/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: elemets/video-custom-controls
type: object
required:
  - video
additionalProperties: false
properties:
  classes:
    type: array
    items:
      type: string
  loop:
    type: boolean
  type:
    type: string
    enum:
      - decorative
      - standard
  video:
    format: html
    type: string
    description: elements/video

// src/components/elements/video-custom-controls/mocks.yaml

video:
  $ref: elements/video#storyslider
  $tpl: elements/video
  classes:
    - VideoCustomControls-video
  class_prefix: VideoCustomControls
$variants:
  - $name: Decorative
    type: decorative
    video:
      $ref: elements/video#video-slide-decorative

// src/components/elements/video-custom-controls/video-custom-controls.twig

{{ attach_library('finstral_global/element-video-custom-controls') }}


<video-custom-controls class="VideoCustomControls {% if classes %} {{ classes|join(' ') }} {% endif %}" type="{{ type|default('standard') }}">
	{{ video|mira({
		classes: ["VideoCustomControls-video"],
		class_prefix: "VideoCustomControls",
		autoplay: false,
		controls: true,
		loop: type == "decorative",
		muted: true,
		preload: "metadata"
	}) }}

	<ul class="VideoCustomControls-controls">
		<li>
			<button
				class="VideoCustomControls-control"
				data-active="{{ "global.mute_video"|t }}"
				data-inactive="{{ "global.unmute_video"|t }}"
				data-audio="true"
				type="button" hidden>
					<span class="VideoCustomControls-muted">
						{% include "@elements/icon/icon.twig" with {
							name: "muted"
						} only %}
					</span>
					<span class="VideoCustomControls-unmuted">
						{% include "@elements/icon/icon.twig" with {
							name: "audio"
						} only %}
					</span>
					<span class="visually-hidden" data-label="audio">{{ "global.unmute_video"|t }}</span>
				</button>
		</li>
		<li>
			<button
				class="VideoCustomControls-control"
				data-active="{{ "global.play_video"|t }}"
				data-inactive="{{ "global.pause_video"|t }}"
				data-playback="false"
				type="button" hidden>
					<span class="VideoCustomControls-play">
						{% include "@elements/icon/icon.twig" with {
							name: "play"
						} only %}
					</span>
					<span class="VideoCustomControls-pause" hidden>
						{% include "@elements/icon/icon.twig" with {
							name: "pause"
						} only %}
					</span>
					<span class="visually-hidden" data-label="playback">{{ "global.play_video"|t }}</span>
				</button>
		</li>
	</ul>
</video-custom-controls>