Le Moyne Component Library

Video Testimonial 

<div class="video_testimonial">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="video_testimonial_inner">
                <figure class="video_testimonial_figure">
                    <blockquote class="video_testimonial_quote">
                        <span class="video_testimonial_quote_open">
                            <svg class="icon icon_quote_outline">
                                <use href="/images/icons.svg#quote_outline" />
                            </svg>
                        </span>
                        <p>My advice to future Dolphins is: Get out there, do what you love, and make the world a better place.”</p>
                    </blockquote>
                    <figcaption class="video_testimonial_figcaption">
                        <span class="video_testimonial_quote_name">Alex Walker '22</span>

                        <a href="#" class="video_testimonial_quote_link">
                            <span class="video_testimonial_quote_link_inner">
                                <span class="video_testimonial_quote_link_label">Biology</span><span class="icon_nowrap video_testimonial_quote_link_icon" aria-hidden="true">&#xfeff;
                                    <svg class="icon icon_caret_right">
                                        <use href="/images/icons.svg#caret_right" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </figcaption>
                </figure>
                <figure class="video_testimonial_embed_figure">
                    <div class="video_testimonial_embed_figure_inner">

                        <img class="video_testimonial_image" srcset="https://images.fastspot.com/le-moyne/810x1440/11 810w, https://images.fastspot.com/le-moyne/686x1220/11 686w, https://images.fastspot.com/le-moyne/552x980/11 552w, https://images.fastspot.com/le-moyne/416x740/11 416w, https://images.fastspot.com/le-moyne/282x500/11 282w, https://images.fastspot.com/le-moyne/169x300/11 169w" sizes="(min-width: 1400px) 403px, (min-width: 1220px) 352px, (min-width: 980px) 282px, (min-width: 740px) 331px, (min-width: 600px) 500px, (min-width: 380px) 87vw, calc(31.67vw + 193px)" src="https://images.fastspot.com/le-moyne/169x300/11" alt="" loading="lazy" width="169" height="300">

                        <div class="video_testimonial_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="video_testimonial_embed_title">Story of Success</figcaption>
                </figure>
            </div>
        </div>
    </div>
</div>
 
<div class="video_testimonial">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="video_testimonial_inner">
				<figure class="video_testimonial_figure">
					<blockquote class="video_testimonial_quote">
						<span class="video_testimonial_quote_open">{{icon('quote_outline')}}</span>
						<p>{{ quote }}</p>
					</blockquote>
					<figcaption class="video_testimonial_figcaption">
						<span class="video_testimonial_quote_name">{{ name }}</span>
						{% if link %}
							{% include '@partial-link' with {
								class: 'video_testimonial_quote',
								title: link.title,
								url: link.url,
								icon: 'caret_right',
								nowrap: true,
							} %}
						{% endif %}
					</figcaption>
				</figure>
				<figure class="video_testimonial_embed_figure">
					<div class="video_testimonial_embed_figure_inner">
						{% include '@partial-image' with {
							class: 'video_testimonial',
							alt: '',
							image: image,
							loading: 'lazy',
							sources: [
								img.portraitWide.xlrg,
								img.portraitWide.lrg,
								img.portraitWide.med,
								img.portraitWide.sml,
								img.portraitWide.xsml,
								img.portraitWide.xxsml
							],
							sizes: [
								'(min-width: 1400px) 403px',
								'(min-width: 1220px) 352px',
								'(min-width: 980px) 282px',
								'(min-width: 740px) 331px',
								'(min-width: 600px) 500px',
								'(min-width: 380px) 87vw',
								'calc(31.67vw + 193px)',
							]
						} %}
						{% include "@partial-lazy-video" with {
							class: "video_testimonial",
							id: video.id,
							type: video.type,
							autoplay: video.autoplay|default(false),
							title: video.title,
							playerVars: {}
						} %}
					</div>
					{% if video_title %}
						<figcaption class="video_testimonial_embed_title">{{ video_title }}</figcaption>
					{% endif %}
				</figure>
			</div>
		</div>
	</div>
</div>

No notes defined.