Framework Component Library

Video Embed 

<!-- Video Embed -->
<div class="video-embed" id="video-embed-1">
    <div class="fs-row">
        <div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">
            <figure class="video-embed__figure">

                <img class="video-embed__image" srcset="https://images.fastspot.com/framework/1440x810/1 1440w, https://images.fastspot.com/framework/1220x686/1 1220w, https://images.fastspot.com/framework/980x552/1 980w, https://images.fastspot.com/framework/740x416/1 740w, https://images.fastspot.com/framework/500x282/1 500w, https://images.fastspot.com/framework/300x169/1 300w" src="https://images.fastspot.com/framework/300x169/1" alt="" loading="lazy" width="300" height="169">

                <div class="lazy-video video-embed__lazy-video " data-js-lazy-video='{"id":"3atcjPFBb-Y","type":"youtube","display":"inline","autoplay":false,"playerVars":{}}'>
                    <a class="lazy-video__play" data-js-lazy-video-play href="" aria-label="Play Fastspot Work">
                        <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>
</div>
<!-- END: Video Embed -->
 
{#
	{% include '@component-video-embed' with {
		image: '1',
		alt: '',
		video: {
			type: '',
			id: '',
			title: ''
		}
	} %}
#}

{% set id = uniqid('video-embed') %}

<!-- Video Embed -->
<div class="video-embed" id="{{ id }}">
	<div class="fs-row">
		<div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">
			<figure class="video-embed__figure">
				{% include '@partial-image' with {
					class: 'video-embed__image',
					image: image,
					alt: alt,
					loading: 'lazy',
					crop: 'wide',
					max: 'xlrg'
				} 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>
</div>
<!-- END: Video Embed -->

No notes defined.