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_wrap">
        <div class="background_video_iframe_target" data-js-background-video-iframe-target>

        </div>
    </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 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#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 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#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_wrap">
		<div
			class="background_video_iframe_target"
			data-js-background-video-iframe-target
		>
			{# iframe loaded in JS #}
		</div>
	</div>

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

No notes defined.