Le Moyne Component Library

Vertical Video Group 

<section id="vertical_video_group-1" aria-labelledby="vertical_video_group-1_title" class="vertical_video_group">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="vertical_video_group_inner">
                <h2 class="vertical_video_group_title" id="vertical_video_group-1_title">Highlights from Commencement</h2>
                <ul class="vertical_video_group_list" aria-labelledby="vertical_video_group-1_title">
                    <li class="vertical_video_group_item">
                        <figure class="vertical_video_group_video_figure">
                            <div class="vertical_video_group_video_figure_inner">

                                <img class="vertical_video_group_image" srcset="https://images.fastspot.com/le-moyne/416x740/1 416w, https://images.fastspot.com/le-moyne/282x500/1 282w, https://images.fastspot.com/le-moyne/169x300/1 169w" sizes="(min-width: 1400px) 405px, (min-width: 1220px) 367px, (min-width: 980px) 290px, (min-width: 740px) 333px, (min-width: 600px) 500px, (min-width: 380px) 86.5vw, calc(31.67vw + 193px)" src="https://images.fastspot.com/le-moyne/169x300/1" alt="" loading="lazy" width="169" height="300">

                                <div class="vertical_video_group_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"whphzsHgq8c","type":"youtube","title":"Story of Success","display":"inline","autoplay":false,"playerVars":{}}'>
                                    <a class="lazy_video_toggle_btn js-play-btn" href="https://www.youtube.com/watch?v=whphzsHgq8c" aria-label="Play Story of Success">

                                        <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="vertical_video_group_video_title">Story of Success</figcaption>
                        </figure>
                    </li>
                    <li class="vertical_video_group_item">
                        <figure class="vertical_video_group_video_figure">
                            <div class="vertical_video_group_video_figure_inner">

                                <img class="vertical_video_group_image" srcset="https://images.fastspot.com/le-moyne/416x740/2 416w, https://images.fastspot.com/le-moyne/282x500/2 282w, https://images.fastspot.com/le-moyne/169x300/2 169w" sizes="(min-width: 1400px) 405px, (min-width: 1220px) 367px, (min-width: 980px) 290px, (min-width: 740px) 333px, (min-width: 600px) 500px, (min-width: 380px) 86.5vw, calc(31.67vw + 193px)" src="https://images.fastspot.com/le-moyne/169x300/2" alt="" loading="lazy" width="169" height="300">

                                <div class="vertical_video_group_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"whphzsHgq8c","type":"youtube","title":"How We Did It","display":"inline","autoplay":false,"playerVars":{}}'>
                                    <a class="lazy_video_toggle_btn js-play-btn" href="https://www.youtube.com/watch?v=whphzsHgq8c" aria-label="Play How We Did It">

                                        <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="vertical_video_group_video_title">How We Did It</figcaption>
                        </figure>
                    </li>
                    <li class="vertical_video_group_item">
                        <figure class="vertical_video_group_video_figure">
                            <div class="vertical_video_group_video_figure_inner">

                                <img class="vertical_video_group_image" srcset="https://images.fastspot.com/le-moyne/416x740/3 416w, https://images.fastspot.com/le-moyne/282x500/3 282w, https://images.fastspot.com/le-moyne/169x300/3 169w" sizes="(min-width: 1400px) 405px, (min-width: 1220px) 367px, (min-width: 980px) 290px, (min-width: 740px) 333px, (min-width: 600px) 500px, (min-width: 380px) 86.5vw, calc(31.67vw + 193px)" src="https://images.fastspot.com/le-moyne/169x300/3" alt="" loading="lazy" width="169" height="300">

                                <div class="vertical_video_group_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"whphzsHgq8c","type":"youtube","title":"Giving Thanks!","display":"inline","autoplay":false,"playerVars":{}}'>
                                    <a class="lazy_video_toggle_btn js-play-btn" href="https://www.youtube.com/watch?v=whphzsHgq8c" aria-label="Play Giving Thanks!">

                                        <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="vertical_video_group_video_title">Giving Thanks!</figcaption>
                        </figure>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>
 
{% set id = uniqid('vertical_video_group') %}

<section id="{{ id }}" aria-labelledby="{{ id }}_title" class="vertical_video_group">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="vertical_video_group_inner">
				<h2 class="vertical_video_group_title" id="{{ id }}_title">{{ title }}</h2>
				<ul class="vertical_video_group_list" aria-labelledby="{{ id }}_title">
					{% for item in videos %}
						<li class="vertical_video_group_item">
							<figure class="vertical_video_group_video_figure">
								<div class="vertical_video_group_video_figure_inner">
									{% include '@partial-image' with {
										class: 'vertical_video_group',
										alt: '',
										image: item.image,
										loading: 'lazy',
										sources: [
											img.portraitWide.sml,
											img.portraitWide.xsml,
											img.portraitWide.xxsml
										],
										sizes: videos|length < 3 ? [
											'(min-width: 980px) 405px',
											'(min-width: 740px) 333px',
											'(min-width: 600px) 500px',
											'(min-width: 380px) 87vw',
											'calc(31.67vw + 193px)',
										] : [
											'(min-width: 1400px) 405px',
											'(min-width: 1220px) 367px',
											'(min-width: 980px) 290px',
											'(min-width: 740px) 333px',
											'(min-width: 600px) 500px',
											'(min-width: 380px) 86.5vw',
											'calc(31.67vw + 193px)',
										]
									} %}
									{% include "@partial-lazy-video" with {
										class: "vertical_video_group",
										id: item.video.id,
										type: item.video.type,
										autoplay: item.video.autoplay|default(false),
										title: item.video.title,
										playerVars: {}
									} %}
								</div>
								{% if item.title %}
									<figcaption class="vertical_video_group_video_title">{{ item.title }}</figcaption>
								{% endif %}
							</figure>
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</section>

No notes defined.