Framework Component Library

Video Background 

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

    </div>

    <div class="video-background__controls">

        <button class="
		button-toggle
		video-background__toggle
 				" data-js-video-background-toggle="">
            <span class="
		button-toggle__inner
		button-toggle__inner--default
		video-background__toggle-inner
	"> <span class="button-toggle__label video-background__toggle-label">Play Video Video Title</span>
                <span class="button-toggle__icon video-background__toggle-icon" aria-hidden="true">
                    <svg class="icon icon--video-play">
                        <use href="/images/icons.svg?1.0.0#video-play" />
                    </svg>
                </span>
            </span> <span class="
			button-toggle__inner
			button-toggle__inner--active
			video-background__toggle-inner
		">
                <span class="button-toggle__label video-background__toggle-label">Pause Video Video Title</span>
                <span class="button-toggle__icon video-background__toggle-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-video-background" with {
		video: {
			type: 'vimeo',
			id: '258133523',
			title: 'Fastspot Moments'
		}
	} %}
#}


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

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

	<div class="video-background__controls">
		{% include '@partial-button-toggle' with {
			classes: {
				base: 'video-background__toggle'
			},
			attributes: {
				'data-js-video-background-toggle': ''
			},
			default: {
				title: 'Play Video ' ~ video.title,
				icon: 'video-play'
			},
			active: {
				title: 'Pause Video ' ~ video.title,
				icon: 'video-pause'
			}
		} only %}
	</div>
</div>

No notes defined.