Le Moyne Component Library

Video Embed: Youtube 

<!-- Video Embed -->
<div class="video_embed_block">
    <div class="fs-row">
        <div class="fs-cell">
            <figure class="video_embed_figure">
                <div class="video_embed_figure_inner">

                    <img class="video_embed_image" srcset="https://images.fastspot.com/le-moyne/1440x810/11 1440w, https://images.fastspot.com/le-moyne/1220x686/11 1220w, https://images.fastspot.com/le-moyne/980x552/11 980w, https://images.fastspot.com/le-moyne/740x416/11 740w, https://images.fastspot.com/le-moyne/500x282/11 500w, https://images.fastspot.com/le-moyne/300x169/11 300w" sizes="(min-width: 1400px) 1318px, (min-width: 1220px) 1151px, (min-width: 980px) 921px, (min-width: 780px) 691px, (min-width: 380px) calc(96.05vw - 39px), calc(31.67vw + 193px)" src="https://images.fastspot.com/le-moyne/300x169/11" alt="" loading="lazy" width="300" height="169">

                    <div class="video_embed_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":{}}'>
                        <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>
                <figcaption class="video_embed_title">Home on the Heights: What to Expect at Le Moyne College</figcaption>
            </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">
				<div class="video_embed_figure_inner">
					{% 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
						],
						sizes: [
							'(min-width: 1400px) 1318px',
							'(min-width: 1220px) 1151px',
							'(min-width: 980px) 921px',
							'(min-width: 780px) 691px',
							'(min-width: 380px) calc(96.05vw - 39px)',
							'calc(31.67vw + 193px)'
						]
					} %}
					{% include "@partial-lazy-video" with {
						class: "video_embed",
						id: video.id,
						type: video.type,
						autoplay: video.autoplay|default(false),
						title: video.title,
						playerVars: {}
					} %}
				</div>
				{% if title %}
					<figcaption class="video_embed_title">{{ title }}</figcaption>
				{% endif %}
			</figure>
		</div>
	</div>
</div>
<!-- END: Video Embed -->

No notes defined.