Lazy Video

{#
	{% include "@partial-lazy-video" with {
		class: '',
		id: '306272054',
		type: 'vimeo',
		title: 'Video Title',
		display: "inline", // or ["inline", "background"]
		autoplay: false,
		hide_button: false,
		load_strategy: "intersect",
		playerVars: {}
	} %}
#}


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

{% set hide_button = hide_button|default(false) %}

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

<div class="{{ class }}_lazy_video lazy_video js-video-lazy-load {{ toggle ? "has_toggle" : "" }}" data-video-lazy-load='{{ config|json_encode }}'>
	{% if not hide_button %}
		<a class="lazy_video_toggle_btn js-play-btn" href="{{ url }}" aria-label="Play {{ title }}">
			<span class="lazy_video_toggle_btn_label">Watch Video</span>
			<span class="lazy_video_toggle_btn_icon">{{ icon('video_play_alt') }}</span>
		</a>
	{% endif %}

	<div class="lazy_video_iframe_wrap">
		<div class="lazy_video_iframe_target js-iframe-target"></div>
	</div>
</div>