Framework Component Library

Video Embed: Youtube 

<!-- Video Embed -->
<div class="video_embed" id="video_embed_2">
    <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="video_embed_lazy_video lazy_video " data-js-video-lazy-load='{"id":"3atcjPFBb-Y","type":"youtube","display":"inline","autoplay":false,"playerVars":{}}'>
                    <a class="lazy_video_toggle_btn" data-js-play-btn href="" aria-label="Play Fastspot Work">
                        <svg class="icon icon_video_play">
                            <use href="/images/icons.svg#video_play" />
                        </svg>
                    </a>
                    <div class="lazy_video_iframe_wrap">
                        <div class="lazy_video_iframe_target" data-js-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'
				} %}
				{% 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.