JHU SOE Component Library

Video Text 

<div class="video_text">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="video_text_inner">
                <div class="video_text_grid">
                    <div class="video_text_grid_item is_media">
                        <div class="video_text_media_wrap">
                            <figure class="video_text_figure">

                                <img class="video_text_image" srcset="https://images.fastspot.com/jhusoe/980x552/1 980w, https://images.fastspot.com/jhusoe/740x416/1 740w, https://images.fastspot.com/jhusoe/500x282/1 500w, https://images.fastspot.com/jhusoe/300x169/1 300w" sizes="(min-width: 500px) 350px, 115px" src="https://images.fastspot.com/jhusoe/300x169/1" alt="" loading="lazy" width="300" height="169">
                            </figure>

                            <div class="_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"XPjQhvjQbSM","type":"youtube","title":"Some title","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 Some title">

                                    <svg class="icon icon_video_play">
                                        <use href="/images/icons.svg#video_play" />
                                    </svg>

                                </a>
                                <div class="lazy_video_iframe_wrap">
                                    <div class="lazy_video_iframe_target js-iframe-target"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="video_text_grid_item is_text">
                        <div class="video_text_type typography">

                            <h3>COVID-19: Education Resource Center</h3>
                            <p>Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue.</p>
                            <p>Sed posuere consectetur est at lobortis. Fusce dapibus, <strong>tellus ac cursus commodo</strong>, tortor mauris condimentum nibh, ut fermentum massa <a href="#">justo sit amet xrisus</a>. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="video_text">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="video_text_inner">
				<div class="video_text_grid">
					<div class="video_text_grid_item is_media">
						<div class="video_text_media_wrap">
							<figure class="video_text_figure">
								{% include '@partial-image' with {
									class: 'video_text',
									alt: '',
									image: image,
									loading: 'lazy',
									sources: [
										img.wide.med,
										img.wide.sml,
										img.wide.xsml,
										img.wide.xxsml
									],
									sizes: [
										'(min-width: 500px) 350px',
										'115px'
									]
								} %}
							</figure>

							{% include "@partial-lazy-video" with {
								class: '',
								id: video.id,
								type: video.type,
								title: video.title,
								display: "inline",
								autoplay: false,
								playerVars: {}
							} %}
						</div>
					</div>

					<div class="video_text_grid_item is_text">
						<div class="video_text_type typography">
							{{ text }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.