Flint Institute of Music Component Library

Video Player 

<!-- Video Embed -->
<div class="js-feature-video video_player_block">
    <div class="fs-row">
        <div class="fs-cell fs-lg-10 fs-lg-justify-center">
            <figure class="video_player_figure">

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

                <div class="video_player_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"XPjQhvjQbSM","type":"youtube","title":"Fastspot - Our Methodology","display":"inline","autoplay":false,"playerVars":{}}' data-target='.video_player_block'>
                    <a class="lazy_video_toggle_btn js-play-btn" href="https://www.youtube.com/watch?v=XPjQhvjQbSM" aria-label="Play Fastspot - Our Methodology">

                        <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>
                <div class="video_player_meta">
                    <div class="video_player_inner">
                        <h2 class="player_title">
                            Featured Season or Series Title Lorem Ipsum
                        </h2>
                        <div class="player_description">
                            We bring the performing arts to life in our exceptional venues and across our communities. Check out the latest events happening across our programs and venues
                        </div>
                    </div>
                </div>
            </figure>
        </div>
    </div>
</div>
<!-- END: Video Embed -->
 
{#
	{% include '@component-video-player' with {
		title: 'Video Player Title',
		description: 'Video Player Description',
		image: '1',
		video: {
			type: '',
			id: '',
			title: ''
		}
	} %}
#}
<!-- Video Embed -->
<div class="js-feature-video video_player_block">
	<div class="fs-row">
		<div class="fs-cell fs-lg-10 fs-lg-justify-center">
			<figure class="video_player_figure">
				{% include "@partial-image" with {
					class: "video_player",
					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_player",
					id: video.id,
					type: video.type,
					autoplay: video.autoplay|default(false),
					title: video.title,
					playerVars: {}
				} %}
				
				<div class="video_player_meta">
					<div class="video_player_inner">
						<h2 class="player_title">
							{{ title }}
						</h2>
						<div class="player_description">
							{{ description }}
						</div>
					</div>
				</div>
			</figure>
		</div>
	</div>
</div>
<!-- END: Video Embed -->

No notes defined.