Le Moyne Component Library

Experience Feature: Video 

<div class="experience_feature">
    <div class="experience_feature_header">
        <div class="fs-row">
            <div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">
                <h2 class="experience_feature_title">Experience life<br>at <em>Le Moyne</em></h2>
            </div>
        </div>
    </div>
    <div class="experience_feature_body">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="experience_feature_inner">
                    <figure class="experience_feature_figure experience_feature_figure_mobile">

                        <img class="experience_feature_image" srcset="https://images.fastspot.com/le-moyne/740x494/6 740w, https://images.fastspot.com/le-moyne/500x334/6 500w, https://images.fastspot.com/le-moyne/300x200/6 300w" sizes="(min-width: 980px) 0, (min-width: 780px) 691px, (min-width: 380px) calc(96.05vw - 39px), calc(31.67vw + 193px)" src="https://images.fastspot.com/le-moyne/300x200/6" alt="" loading="lazy" width="300" height="200">

                        <div class="experience_feature_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"137925379","type":"vimeo","title":"Fastspot Moments","display":"inline","autoplay":false,"playerVars":{}}'>
                            <a class="lazy_video_toggle_btn js-play-btn" href="https://vimeo.com/137925379" 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 class="experience_feature_content">
                        <p class="experience_feature_text">Here you'll uncover new talents and form lifelong friendships. You'll experience, learn and grow, and look at the world a little differently.</p>
                        <ul class="experience_feature_links">
                            <li class="experience_feature_link_item">

                                <a href="#" class="experience_feature_link">
                                    <span class="experience_feature_link_inner">
                                        <span class="experience_feature_link_label">Explore Life at Le Moyne</span><span class="icon_nowrap experience_feature_link_icon" aria-hidden="true">&#xfeff;
                                            <svg class="icon icon_caret_right">
                                                <use href="/images/icons.svg#caret_right" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </li>
                            <li class="experience_feature_link_item">

                                <a href="#" class="experience_feature_link">
                                    <span class="experience_feature_link_inner">
                                        <span class="experience_feature_link_label">Our Jesuit Values</span><span class="icon_nowrap experience_feature_link_icon" aria-hidden="true">&#xfeff;
                                            <svg class="icon icon_caret_right">
                                                <use href="/images/icons.svg#caret_right" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </li>
                            <li class="experience_feature_link_item">

                                <a href="#" class="experience_feature_link">
                                    <span class="experience_feature_link_inner">
                                        <span class="experience_feature_link_label">Equity, Diversity, Inclusion and Belonging</span><span class="icon_nowrap experience_feature_link_icon" aria-hidden="true">&#xfeff;
                                            <svg class="icon icon_caret_right">
                                                <use href="/images/icons.svg#caret_right" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <figure class="experience_feature_figure experience_feature_figure_desktop">

                        <img class="experience_feature_image" srcset="https://images.fastspot.com/le-moyne/980x654/6 980w, https://images.fastspot.com/le-moyne/740x494/6 740w, https://images.fastspot.com/le-moyne/500x334/6 500w" sizes="(min-width: 1400px) 802px, (min-width: 1220px) 701px, (min-width: 980px) 561px, 0px" src="https://images.fastspot.com/le-moyne/500x334/6" alt="" loading="lazy" width="500" height="334">

                        <div class="experience_feature_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"137925379","type":"vimeo","title":"Fastspot Moments","display":"inline","autoplay":false,"playerVars":{}}'>
                            <a class="lazy_video_toggle_btn js-play-btn" href="https://vimeo.com/137925379" 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>
    </div>
</div>
 
{#
	{% include "@component-experience-feature" with {
		title: '',
		text: '',
		links: [
			{
				url: '',
				title: '',
			},
		],
		image: '',
		video: {
			type: 'vimeo',
			id: '',
			title: ''
		}
	} %}
#}

<div class="experience_feature">
	<div class="experience_feature_header">
		<div class="fs-row">
			<div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">
				<h2 class="experience_feature_title">{{ title }}</h2>
			</div>
		</div>
	</div>
	<div class="experience_feature_body">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="experience_feature_inner">
					<figure class="experience_feature_figure experience_feature_figure_mobile">
						{% include "@partial-image" with {
							class: 'experience_feature',
							alt: '',
							image: image,
							loading: 'lazy',
							sources: [
								img.classic.sml,
								img.classic.xsml,
								img.classic.xxsml
							],
							sizes: [
								'(min-width: 980px) 0',
								'(min-width: 780px) 691px',
								'(min-width: 380px) calc(96.05vw - 39px)',
								'calc(31.67vw + 193px)',
							],
						} %}
						{% if video %}
							{% include "@partial-lazy-video" with {
								class: "experience_feature",
								id: video.id,
								type: video.type,
								autoplay: video.autoplay|default(false),
								title: video.title,
								playerVars: {}
							} %}
						{% endif %}
					</figure>
					<div class="experience_feature_content">
						<p class="experience_feature_text">{{ text }}</p>
						{% if links %}
							<ul class="experience_feature_links">
								{% for link in links %}
									<li class="experience_feature_link_item">
										{% include "@partial-link" with {
											url: link.url,
											title: link.title,
											class: 'experience_feature',
											icon: 'caret_right',
											nowrap: true,
										} %}
									</li>
								{% endfor %}
							</ul>
						{% endif %}
					</div>
					<figure class="experience_feature_figure experience_feature_figure_desktop">
						{% include "@partial-image" with {
							class: 'experience_feature',
							alt: '',
							image: image,
							loading: 'lazy',
							sources: [
								img.classic.med,
								img.classic.sml,
								img.classic.xsml,
							],
							sizes: [
								'(min-width: 1400px) 802px',
								'(min-width: 1220px) 701px',
								'(min-width: 980px) 561px',
								'0px',
							],
						} %}
						{% if video %}
							{% include "@partial-lazy-video" with {
								class: "experience_feature",
								id: video.id,
								type: video.type,
								autoplay: video.autoplay|default(false),
								title: video.title,
								playerVars: {}
							} %}
						{% endif %}
					</figure>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.