Framework Component Library

Homepage Video 

<!-- Homepage Video -->
<div class="homepage-video" data-uuid="homepage-video-1">
    <div class="fw-container">
        <figure class="homepage-video__figure">

            <img class="figure-media-item__img" 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="background-video" data-js-background-video='{"display":"background","id":"258133523","type":"vimeo","autoplay":true}'>
                <div class="background-video__iframe-target" data-js-background-video-iframe-target>

                </div>

                <div class="background-video__controls">

                    <button class="background-video__control
 		 			background-video__control--play
 				" data-js-background-video-control="play" aria-label="Play Video Fastspot, Our Methodology">
                        <span class="background-video__control-inner"> <span class="background-video__control-label">Play Video</span>
                            <span class="background-video__control-icon" aria-hidden="true"><svg class="icon icon--video-play">
                                    <use href="/images/icons.svg?1.0.0#video-play" />
                                </svg></span>
                        </span>
                    </button>

                    <button class="background-video__control
 		 			background-video__control--pause
 				" data-js-background-video-control="pause" aria-label="Pause Video Fastspot, Our Methodology">
                        <span class="background-video__control-inner"> <span class="background-video__control-label">Pause Video</span>
                            <span class="background-video__control-icon" aria-hidden="true"><svg class="icon icon--video-pause">
                                    <use href="/images/icons.svg?1.0.0#video-pause" />
                                </svg></span>
                        </span>
                    </button>
                </div>
            </div>
            <div class="figure-media-item__meta">
                <div class="figure-media-item__meta-title">
                    Transforming Lives Through the Arts
                </div>
                <div class="figure-media-item__meta-link">

                    <a class="button-paint
 				" href="#">
                        <span class="button-paint__inner"> <span class="button-paint__label">Learn More</span>
                        </span>
                    </a>
                </div>
            </div>
        </figure>
    </div>
</div>
<!-- END: Homepage Video -->
 
{#
	{% include '@component-homepage-video' with {
		image: '1',
		video: 'https://vimeo.com/12345',
		title: 'Homepage Video Title',
	} %}
#}
{% set uuid = uniqid("homepage-video") %}

<!-- Homepage Video -->
<div class="homepage-video" data-uuid="{{ uuid }}">
	<div class="fw-container">
		<figure class="homepage-video__figure">
			{% if image %}
				{# {% include '@partial-picture' with {
					base_class: 'figure-media-item',
					image: image,
					alt: '',
					loading: 'lazy',
					default: img.wide.med,
					sources: {
						'1200px': img.wide.xlrg,
						'500px': img.wide.lrg
					}
				} %} #}
				{% include '@partial-image' with {
					class: 'figure-media-item__img',
					image: image,
					alt: alt,
					loading: 'lazy',
					crop: 'wide',
					max: 'xlrg'
				} only %}
			{% endif %}
			{% if video %}
				{% include '@partial-background-video' with {
					class: "figure-media-item__video",
					id: video.id,
					type: video.type
				} %}
			{% endif %}
			{% if title or link %}
				<div class="figure-media-item__meta">
					<div class="figure-media-item__meta-title">
						{{ title }}
					</div>
					<div class="figure-media-item__meta-link">
						{% include '@partial-link' with {
							classes: {
								base: 'button-paint',
							},
							title: link.title,
							url: link.url,
							icon: null
						} only %}
					</div>
				</div>
			{% endif %}
		</figure>
	</div>
</div>
<!-- END: Homepage Video -->

No notes defined.