DRBU Component Library

Video Embed: Vimeo 

<!-- Video Embed -->
<div class="video_embed_block">
    <div class="fs-row">
        <div class="fs-cell">
            <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 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_video_play">
                            <use href="/images/icons.svg#video_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">
			<figure class="video_embed_figure">
				{% if embed %}
					<div class="video_embed_wrapper">
						<iframe src="https://www.youtube.com/embed/{{ embed }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
					</div>
				{% else %}
					{% 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: {}
					} %}
				{% endif %}
			</figure>
		</div>
	</div>
</div>
<!-- END: Video Embed -->

No notes defined.