Hilbert Component Library

Video Embed: Vimeo 

<!-- Video Embed -->
<div class="video_embed_block">
    <div class="fs-row fs-lg-justify-center">
        <div class="fs-cell fs-lg-10">
            <figure class="video_embed_figure">
                <div class="video_embed_img_wrap">

                    <img class="video_embed_image" srcset="https://images.fastspot.com/hilbert/300x169/1 300w, https://images.fastspot.com/hilbert/500x282/1 500w, https://images.fastspot.com/hilbert/740x416/1 740w, https://images.fastspot.com/hilbert/980x552/1 980w, https://images.fastspot.com/hilbert/1220x686/1 1220w, https://images.fastspot.com/hilbert/1440x810/1 1440w" src="https://images.fastspot.com/hilbert/1440x810/1" alt="" loading="lazy" width="1440" height="810">
                </div>

                <div class="video_embed_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"258133523","type":"vimeo","title":"Fastspot Moments","display":"inline","autoplay":false,"load_strategy":"intersect","playerVars":{}}'>
                    <a class="lazy_video_toggle_btn js-play-btn" href="https://vimeo.com/258133523" aria-label="Play Fastspot Moments">
                        <span class="lazy_video_toggle_btn_label">Watch Video</span>
                        <span class="lazy_video_toggle_btn_icon"><svg class="icon icon_video_play_alt">
                                <use href="/images/icons.svg#video_play_alt" />
                            </svg></span>
                    </a>

                    <div class="lazy_video_iframe_wrap">
                        <div class="lazy_video_iframe_target js-iframe-target"></div>
                    </div>
                </div>
            </figure>
        </div>
    </div>
</div>
<!-- END: Video Embed -->
 
{#
	{% include '@component-video-embed' with {
		image: '1',
		video: {
			type: '',
			id: '',
			title: ''
		}
	} %}
#}

<!-- Video Embed -->
<div class="video_embed_block">
	<div class="fs-row fs-lg-justify-center">
		<div class="fs-cell fs-lg-10">
			<figure class="video_embed_figure">
				<div class="video_embed_img_wrap">
					{% include '@partial-image' with {
						class: 'video_embed',
						alt: alt,
						image: image,
						loading: 'lazy',
						crop: 'wide',
						max: 'xlrg'
					} %}
				</div>
				
				{% include "@partial-lazy-video" with {
					class: "video_embed",
					id: video.id,
					type: video.type,
					autoplay: video.autoplay|default(false),
					title: video.title,
					playerVars: {}
				} %}
			</figure>
		</div>
	</div>
</div>
<!-- END: Video Embed -->

No notes defined.