Framework Component Library

Lazy Video 

<div class=" lazy_video " data-js-video-lazy-load='{"id":null,"type":null,"display":"inline","autoplay":false,"playerVars":{}}'>
    <a class="lazy_video_toggle_btn" data-js-play-btn href="https://vimeo.com/258133523" aria-label="Play ">
        <svg class="icon icon_video_play">
            <use href="/images/icons.svg#video_play" />
        </svg>
    </a>
    <div class="lazy_video_iframe_wrap">
        <div class="lazy_video_iframe_target" data-js-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="{{ classes.base }} lazy_video {{ toggle ? "has_toggle" : "" }}"
	data-js-video-lazy-load='{{ config|json_encode }}'
>
	<a
		class="lazy_video_toggle_btn"
		data-js-play-btn
		href="{{ url }}"
		aria-label="Play {{ video.title }}"
	>
		{{ icon('video_play') }}
	</a>
	<div class="lazy_video_iframe_wrap">
		<div class="lazy_video_iframe_target" data-js-iframe-target></div>
	</div
	>
</div>

No notes defined.