Johns Hopkins University Component Library

Spotlight: Video 

<div class="js-spotlight spotlight_block">
    <div class="spotlight__body">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="spotlight__inner">
                    <div class="spotlight__content">
                        <div class="spotlight_header">
                            <span class="spotlight_logo">
                                <svg class="icon icon_logo_stacked">
                                    <use href="/images/icons.svg#logo_stacked" />
                                </svg>
                            </span>
                            <h1 class="spotlight_title">Welcome to Johns Hopkins Facilities & Real Estate!</h1>
                        </div>
                        <div class="spotlight_main"></div>
                    </div>

                    <div class="spotlight__video">
                        <div class="js-background-video-wrapper page_header_bg_video" data-background-video='{"display":"background","id":"3atcjPFBb-Y","type":"youtube","title":"Fastspot Work","autoplay":true}'>
                            <div class="page_header_bg_video_controls">

                                <button class="page_header_bg_video_play_button js-page-header-bg-video-play-button">
                                    <span class="page_header_bg_video_play_button_inner">
                                        <span class="page_header_bg_video_play_button_label">Play Video</span>
                                        <span class="page_header_bg_video_play_button_icon" aria-hidden="true">

                                            <svg class="icon icon_play">
                                                <use href="/images/icons.svg#play" />
                                            </svg>

                                        </span>
                                    </span>
                                </button>

                                <button class="page_header_bg_video_pause_button js-page-header-bg-video-pause-button">
                                    <span class="page_header_bg_video_pause_button_inner">
                                        <span class="page_header_bg_video_pause_button_label">Pause Video</span>
                                        <span class="page_header_bg_video_pause_button_icon" aria-hidden="true">

                                            <svg class="icon icon_pause">
                                                <use href="/images/icons.svg#pause" />
                                            </svg>

                                        </span>
                                    </span>
                                </button>
                            </div>

                            <div class="page_header_bg_video_iframe_wrap">
                                <div class="page_header_bg_video_iframe_target js-iframe-target"></div>
                            </div>
                        </div>
                    </div>

                    <div class="spotlight_links">
                        <a class="spotlight_link" href="#">
                            <span class="spotlight_link_inner">
                                <span class="spotlight_link_icon">
                                    <svg class="icon icon_wrenches">
                                        <use href="/images/icons.svg#wrenches" />
                                    </svg>
                                </span>
                                <span class="spotlight_link_label">Request a Service</span>
                                <span class="spotlight_link_hint">
                                    <svg class="icon icon_arrow_right">
                                        <use href="/images/icons.svg#arrow_right" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                        <a class="spotlight_link" href="#">
                            <span class="spotlight_link_inner">
                                <span class="spotlight_link_icon">
                                    <svg class="icon icon_parking_mini">
                                        <use href="/images/icons.svg#parking_mini" />
                                    </svg>
                                </span>
                                <span class="spotlight_link_label">Pay for Parking or Citation</span>
                                <span class="spotlight_link_hint">
                                    <svg class="icon icon_arrow_right">
                                        <use href="/images/icons.svg#arrow_right" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                        <a class="spotlight_link" href="#">
                            <span class="spotlight_link_inner">
                                <span class="spotlight_link_icon">
                                    <svg class="icon icon_shuttle">
                                        <use href="/images/icons.svg#shuttle" />
                                    </svg>
                                </span>
                                <span class="spotlight_link_label">Real-Time Shuttle (Transloc)</span>
                                <span class="spotlight_link_hint">
                                    <svg class="icon icon_arrow_right">
                                        <use href="/images/icons.svg#arrow_right" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="js-spotlight spotlight_block">
	<div class="spotlight__body">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="spotlight__inner">
					<div class="spotlight__content">
						<div class="spotlight_header">
							<span class="spotlight_logo">{{ icon('logo_stacked') }}</span>
							<h1 class="spotlight_title">{{ title }}</h1>
						</div>
						<div class="spotlight_main"></div>
					</div>

					{% if video.id %}
						{% set video_options = {
							display: "background",
							id: video.id,
							type: video.type,
							title: video.title,
							autoplay: true
						} %}
						<div class="spotlight__video">
							<div class="js-background-video-wrapper page_header_bg_video" data-background-video='{{ video_options|json_encode }}'>
								<div class="page_header_bg_video_controls">
									{% render '@partial-button' with {
										class: 'page_header_bg_video_play',
										title: 'Play Video',
										icon: 'play',
										js: true
									} %}

									{% render "@partial-button" with {
										class: 'page_header_bg_video_pause',
										title: 'Pause Video',
										icon: 'pause',
										js: true
									} %}
								</div>

								<div class="page_header_bg_video_iframe_wrap">
									<div class="page_header_bg_video_iframe_target js-iframe-target"></div>
								</div>
							</div>
						</div>
					{% endif %}

					{% if image %}
						<div class="spotlight_media spotlight_media_lg">
							{% include '@partial-picture' with {
								class: 'spotlight',
								alt: '',
								image: image,
								loading: 'lazy',
								default: img.wide.xxsml,
								sources: {
									'1220px': img.ultrawide.lrg,
									'980px': img.wide.med,
									'740px': img.wide.sml,
									'500px': img.wide.xsml
								}
							} %}
						</div>
					{% endif %}

					<div class="spotlight_links">
						{% for item in items %}
							<a class="spotlight_link" href="{{ item.url }}">
								<span class="spotlight_link_inner">
									<span class="spotlight_link_icon">{{ icon(item.icon) }}</span>
									<span class="spotlight_link_label">{{ item.title }}</span>
									<span class="spotlight_link_hint">{{ icon('arrow_right') }}</span>
								</span>
							</a>
						{% endfor %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.