JHU Sustainability Component Library

Home Feature: Video 

<div class="home_feat js-home-feature">
    <h1 id="page_title" tabindex="-1">JHU Sustainability</h1>

    <div class="home_feat_inner">
        <div class="home_feat_grid">
            <div class="home_feat_grid_item is_content">
                <div data-anim="content">
                    <h2 class="home_feat_title">
                        We are advancing a culture of sustainability through <a href="#">learning</a>, <a href="#">research</a>, and <a href="#">engagement opportunities</a>.
                    </h2>

                    <div class="home_feat_btn_wrap">

                        <a href="#" class="button theme_light ">
                            <span class="button_inner">
                                <span class="button_label">Who We Are</span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="home_feat_grid_item is_media">
                <div class="home_feat_media_wrap">
                    <div data-anim="media">
                        <div class="home_feat_image_wrap">

                            <img class="home_feat_image" srcset="https://images.fastspot.com/jhu-sustainability/1440x810/1 1440w, https://images.fastspot.com/jhu-sustainability/1220x686/1 1220w, https://images.fastspot.com/jhu-sustainability/980x552/1 980w, https://images.fastspot.com/jhu-sustainability/740x416/1 740w, https://images.fastspot.com/jhu-sustainability/500x282/1 500w, https://images.fastspot.com/jhu-sustainability/300x169/1 300w" src="https://images.fastspot.com/jhu-sustainability/300x169/1" alt="" loading="eager" width="300" height="169">
                        </div>

                        <div class="home_feat_video_wrap">

                            <div class="home_feat_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"hlh8UxXcQRc","type":"youtube","title":"","playerVars":{}}'>
                                <button type="button" class="lazy_video_toggle_btn js-play-btn" aria-label="Video Play Button">

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

                                </button>

                                <div class="lazy_video_iframe_wrap">
                                    <div class="lazy_video_iframe_target js-iframe-target"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{# {% include "@component-home-feature" with {
	headline:
		'We are advancing a culture of sustainability through <a href="#">learning</a>, <a href="#">research</a>, and <a href="#">engagement opportunities</a>.',
	button: {
		title: 'Who We Are',
		url: '#'
	},
	image: 1,
	video: {
		type: 'youtube',
		id: 'hlh8UxXcQRc'
	}
} %} #}

<div class="home_feat js-home-feature">
	<h1 id="page_title" tabindex="-1">{{ config.name }}</h1>

	<div class="home_feat_inner">
		<div class="home_feat_grid">
			<div class="home_feat_grid_item is_content">
				<div data-anim="content">
					<h2 class="home_feat_title">
						{{ headline }}
					</h2>

					{% if button %}
						<div class="home_feat_btn_wrap">
							{% include "@partial-button" with {
								theme: 'light',
								title: button.title,
								url: button.url
							} %}
						</div>
					{% endif %}
				</div>
			</div>
			<div class="home_feat_grid_item is_media">
				<div class="home_feat_media_wrap">
					<div data-anim="media">
						<div class="home_feat_image_wrap">
							{% include '@partial-image' with {
								class: 'home_feat',
								alt: '',
								image: '1',
								loading: 'eager',
								sources: [
									img.wide.xlrg,
									img.wide.lrg,
									img.wide.med,
									img.wide.sml,
									img.wide.xsml,
									img.wide.xxsml
								]
							} %}
						</div>

						{% if video %}
							<div class="home_feat_video_wrap">
								{% include "@partial-lazy-video" with {
									class: 'home_feat',
									id: video.id,
									type: video.type,
									title: video.title|default(''),
									playerVars: video.playerVars|default({})
								} %}
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.