Framework Component Library

Lazy Video 

<div class="lazy-video  " data-js-lazy-video='{"id":null,"type":null,"display":"inline","autoplay":false,"playerVars":{}}'>
    <a class="lazy-video__play" data-js-lazy-video-play href="https://vimeo.com/258133523" aria-label="Play ">
        <svg class="icon icon--video-play">
            <use href="/images/icons.svg?1.0.0#video-play" />
        </svg>
    </a>
    <div class="lazy-video__iframe-wrapper">
        <div class="lazy-video__iframe-target" data-js-lazy-video-iframe-target></div>
    </div>
</div>
 
{#
	{% include "@partial-lazy-video" with {
		classes: {
			base: '',
			modifiers: []
		},
		video: {
			id: '258133523',
			type: 'vimeo',
			title: 'Video Title'
		},
		display: "inline", // or ["inline", "background"]
		autoplay: false,
		playerVars: {}
	} %}
#}


{% set config = {
	id: video.id,
	type: video.type,
	display: display|default("inline"),
	autoplay: autoplay|default(false),
	playerVars: playerVars|default({})
} %}

{% if type == "youtube" %}
	{% set url = 'https://www.youtube.com/watch?v=' ~ id %}
{% elseif type == "vimeo" %}
	{% set url = 'https://vimeo.com/' ~ id %}
{% endif %}

<div
	class="lazy-video {{ classes.base }} {{ toggle ? "lazy_video--has-toggle" : "" }}"
	data-js-lazy-video='{{ config|json_encode }}'
>
	<a
		class="lazy-video__play"
		data-js-lazy-video-play
		href="{{ url }}"
		aria-label="Play {{ video.title }}"
	>
		{{ icon('video-play') }}
	</a>
	<div class="lazy-video__iframe-wrapper">
		<div class="lazy-video__iframe-target" data-js-lazy-video-iframe-target></div>
	</div
	>
</div>

No notes defined.