Paul Smith's Component Library

Video Embed: Vimeo 

<!-- Video Embed -->
<div class="video_embed_block">
    <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/generic/1440x810/1 1440w, https://images.fastspot.com/generic/1220x686/1 1220w, https://images.fastspot.com/generic/980x552/1 980w, https://images.fastspot.com/generic/740x416/1 740w, https://images.fastspot.com/generic/500x282/1 500w, https://images.fastspot.com/generic/300x169/1 300w" src="https://images.fastspot.com/generic/300x169/1" alt="" loading="lazy" width="300" height="169">

                <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,"playerVars":{}}'>
                    <a class="lazy_video_toggle_btn js-play-btn" href="https://vimeo.com/258133523" aria-label="Play Fastspot Moments">

                        <svg class="icon icon_play">
                            <use href="/images/icons.svg#play" />
                        </svg>

                    </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">
		<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',
					alt: '',
					image: image,
					loading: 'lazy',
					sources: [
						img.wide.xlrg,
						img.wide.lrg,
						img.wide.med,
						img.wide.sml,
						img.wide.xsml,
						img.wide.xxsml
					]
				} %}
				{% 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.