Framework Component Library

Video Embed: Vimeo (Portrait) 

<!-- Video Embed -->
<div class="video-embed" id="video-embed-7">
    <div class="fw-container">
        <figure class="video-embed__figure">

            <img class="video-embed__image" srcset="https://images.fastspot.com/framework/810x1440/1 810w, https://images.fastspot.com/framework/686x1220/1 686w, https://images.fastspot.com/framework/552x980/1 552w, https://images.fastspot.com/framework/416x740/1 416w, https://images.fastspot.com/framework/282x500/1 282w, https://images.fastspot.com/framework/169x300/1 169w" src="https://images.fastspot.com/framework/169x300/1" alt="" loading="lazy" width="169" height="300">

            <div class="
		lazy-video
		video-embed__lazy-video
		
		lazy-video--aspect-portrait
	" data-js-lazy-video='{"id":"613729649","type":"vimeo","display":"inline","aspectRatio":"portrait","autoplay":false,"playerVars":{}}'>
                <a class="lazy-video__play" data-js-lazy-video-play href="" aria-label="Play Fastspot Moments">
                    <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>
        </figure>
    </div>
</div>
<!-- END: Video Embed -->
 
{#
	{% include '@component-video-embed' with {
		image: '1',
		alt: '',
		aspectRatio: 'wide', // 'wide' (default), 'portrait', or 'square'
		video: {
			type: '',
			id: '',
			title: ''
		}
	} %}
#}

{% set id = uniqid('video-embed') %}
{% set videoAspectRatio = aspectRatio|default('wide') %}

{% if videoAspectRatio == 'portrait' %}
	{% set imageCrop = 'portraitWide' %}
	{% set imageMax = 'xlrg' %}
{% elseif videoAspectRatio == 'square' %}
	{% set imageCrop = 'square' %}
	{% set imageMax = 'med' %}
{% else %}
	{% set imageCrop = 'wide' %}
	{% set imageMax = 'xlrg' %}
{% endif %}

<!-- Video Embed -->
<div class="video-embed" id="{{ id }}">
	<div class="fw-container">
		<figure class="video-embed__figure">
			{% include '@partial-image' with {
				class: 'video-embed__image',
				image: image,
				alt: alt,
				loading: 'lazy',
				crop: imageCrop,
				max: imageMax
			} only %}
			{% include "@partial-lazy-video" with {
				classes: {
					base: 'video-embed__lazy-video',
					modifiers: []
				},
				video: {
					id: video.id,
					type: video.type,
					title: video.title
				},
				autoplay: video.autoplay|default(false),
				playerVars: {}
			} %}
		</figure>
	</div>
</div>
<!-- END: Video Embed -->

No notes defined.