Framework Component Library

Video Lazy 

<!-- Default -->
<div class="
		video-lazy
		
		
	" data-js-video-lazy='{"id":null,"type":null,"display":"inline","aspectRatio":"landscape","autoplay":false,"playerVars":{}}'>
    <a class="video-lazy__play" data-js-video-lazy-play href="" aria-label="Play ">
        <svg class="icon icon--video-play">
            <use href="/images/icons.svg?1.0.0#video-play" />
        </svg>
    </a>
    <div class="video-lazy__iframe-wrapper">
        <div class="video-lazy__iframe-target" data-js-video-lazy-iframe-target></div>
    </div>
</div>


<!-- Landscape (16:9) -->
<div class="
		video-lazy
		
		
	" data-js-video-lazy='{"id":null,"type":null,"display":"inline","aspectRatio":"landscape","autoplay":false,"playerVars":{}}'>
    <a class="video-lazy__play" data-js-video-lazy-play href="" aria-label="Play ">
        <svg class="icon icon--video-play">
            <use href="/images/icons.svg?1.0.0#video-play" />
        </svg>
    </a>
    <div class="video-lazy__iframe-wrapper">
        <div class="video-lazy__iframe-target" data-js-video-lazy-iframe-target></div>
    </div>
</div>


<!-- Portrait (9:16) -->
<div class="
		video-lazy
		
		video-lazy--aspect-portrait
	" data-js-video-lazy='{"id":null,"type":null,"display":"inline","aspectRatio":"portrait","autoplay":false,"playerVars":{}}'>
    <a class="video-lazy__play" data-js-video-lazy-play href="" aria-label="Play ">
        <svg class="icon icon--video-play">
            <use href="/images/icons.svg?1.0.0#video-play" />
        </svg>
    </a>
    <div class="video-lazy__iframe-wrapper">
        <div class="video-lazy__iframe-target" data-js-video-lazy-iframe-target></div>
    </div>
</div>


<!-- Square (1:1) -->
<div class="
		video-lazy
		
		video-lazy--aspect-square
	" data-js-video-lazy='{"id":null,"type":null,"display":"inline","aspectRatio":"square","autoplay":false,"playerVars":{}}'>
    <a class="video-lazy__play" data-js-video-lazy-play href="" aria-label="Play ">
        <svg class="icon icon--video-play">
            <use href="/images/icons.svg?1.0.0#video-play" />
        </svg>
    </a>
    <div class="video-lazy__iframe-wrapper">
        <div class="video-lazy__iframe-target" data-js-video-lazy-iframe-target></div>
    </div>
</div>


{#
	{% include "@partial-video-lazy" with {
		classes: {
			base: '',
			modifiers: []
		},
		video: {
			id: '258133523',
			type: 'vimeo',
			title: 'Video Title'
		},
		display: "inline",
		aspectRatio: "landscape",
		autoplay: false,
		playerVars: {}
	} %}
#}


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

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

<div
	class="
		video-lazy
		{{ classes.base }}
		{{ aspectRatio != 'landscape' ? 'video-lazy--aspect-' ~ aspectRatio : '' }}
	"
	data-js-video-lazy='{{ config|json_encode }}'
>
	<a
		class="video-lazy__play"
		data-js-video-lazy-play
		href="{{ url }}"
		aria-label="Play {{ video.title }}"
	>
		{{ icon('video-play') }}
	</a>
	<div class="video-lazy__iframe-wrapper">
		<div class="video-lazy__iframe-target" data-js-video-lazy-iframe-target></div>
	</div>
</div>

No notes defined.