JHU Sustainability Component Library

Lazy Video 

<div class="_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"306272054","type":"vimeo","title":"Some Video Title","playerVars":{}}'>
    <button type="button" class="lazy_video_toggle_btn js-play-btn" aria-label="Video Play Button">

        <svg class="icon icon_video_play">
            <use href="/images/icons.svg#video_play" />
        </svg>

    </button>

    <div class="lazy_video_iframe_wrap">
        <div class="lazy_video_iframe_target js-iframe-target"></div>
    </div>
</div>
 
{#
	{% include "@partial-lazy-video" with {
		class: '',
		id: '306272054',
		type: 'vimeo',
		title: 'Some Video Title',
		playerVars: {}
	} %}
#}

{% set config = {
	id: id,
	type: type,
	title: title,
	playerVars: playerVars|default({})
} %}

<div class="{{ class }}_lazy_video lazy_video js-video-lazy-load {{ toggle ? "has_toggle" : "" }}" data-video-lazy-load='{{ config|json_encode }}'>
	<button type="button" class="lazy_video_toggle_btn js-play-btn" aria-label="Video Play Button">
		{{ icon('video_play') }}
	</button>
	
	<div class="lazy_video_iframe_wrap">
		<div class="lazy_video_iframe_target js-iframe-target"></div>
	</div>
</div>

No notes defined.