Framework Component Library

Background Video 

<div class="background-video" data-js-background-video='{"display":"background","id":"258133523","type":"vimeo","autoplay":true}'>
    <div class="background-video__iframe-target" data-js-background-video-iframe-target>

    </div>

    <div class="background-video__controls">

        <button class="background-video__control
 		 			background-video__control--play
 				" data-js-background-video-control="play" aria-label="Play Video Video Title">
            <span class="background-video__control-inner"> <span class="background-video__control-label">Play Video</span>
                <span class="background-video__control-icon" aria-hidden="true"><svg class="icon icon--video-play">
                        <use href="/images/icons.svg?1.0.0#video-play" />
                    </svg></span>
            </span>
        </button>

        <button class="background-video__control
 		 			background-video__control--pause
 				" data-js-background-video-control="pause" aria-label="Pause Video Video Title">
            <span class="background-video__control-inner"> <span class="background-video__control-label">Pause Video</span>
                <span class="background-video__control-icon" aria-hidden="true"><svg class="icon icon--video-pause">
                        <use href="/images/icons.svg?1.0.0#video-pause" />
                    </svg></span>
            </span>
        </button>
    </div>
</div>
 
{#
	{% include "@partial-background-video" with {
		video: {
			type: 'vimeo',
			id: '258133523',
			title: 'Fastspot Moments'
		}
	} %}
#}


{% set config = {
	display: 'background',
	id: video.id,
	type: video.type,
	autoplay: true
} %}

<div
	class="background-video"
	data-js-background-video='{{ config|json_encode }}'
>
	<div
		class="background-video__iframe-target"
		data-js-background-video-iframe-target
	>
		{# iframe loaded in JS #}
	</div>

	<div class="background-video__controls">
		{% for control in ['play', 'pause'] %}
			{% include '@partial-button' with {
				classes: {
					base: 'background-video__control',
					modifiers: [control]
				},
				attributes: {
					'data-js-background-video-control': control,
					'aria-label': control | capitalize ~ ' Video ' ~ video.title
				},
				title: control | capitalize ~ ' Video',
				icon: 'video-' ~ control
			} only %}
		{% endfor %}
	</div>
</div>

No notes defined.