Johns Hopkins Data Science and AI Institute Component Library

Video Callout 

<div class="video_callout">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="video_callout_inner">

                <div class="video_callout_body">
                    <div class="video_callout_description">
                        Video feature component ultricies est nisi eu integer. Scelerisque est varius dignissim molestie. Lacinia sit non tincidunt suspendisse suspendisse non.
                    </div>

                    <div class="video_callout_actions">
                        <div class="video_callout_action">
                            <a class="video_callout_appender" href="#">
                                <span class="video_callout_appender_label">
                                    Watch Video
                                </span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="js-background-video-wrapper page_header_bg_video" data-background-video='{"display":"background","id":"76979871","type":"vimeo","title":"Fastspot Moments","autoplay":true}'>
                    <div class="page_header_bg_video_iframe_wrap">
                        <div class="page_header_bg_video_iframe_target js-iframe-target"></div>
                    </div>

                    <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>

                <div class="video_callout_lazy_video lazy_video js-video-lazy-load " data-video-lazy-load='{"id":"76979871","type":"vimeo","title":"Video Title","display":"inline","autoplay":false,"playerVars":{}}'>
                    <a class="lazy_video_toggle_btn js-play-btn" href="https://vimeo.com/76979871" aria-label="Play Video Title">
                        <span class="lazy_video_toggle_btn_inner">
                            <span class="lazy_video_toggle_btn_icon">
                                <svg class="icon icon_play">
                                    <use href="/images/icons.svg#play" />
                                </svg>
                            </span>
                            <span class="lazy_video_toggle_btn_label">Watch video</span>
                        </span>
                    </a>

                    <div class="lazy_video_iframe_wrap">
                        <div class="lazy_video_iframe_target js-iframe-target"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="video_callout">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="video_callout_inner">
				{% set video_options = {
					display: "background",
					id: video.id,
					type: video.type,
					title: video.title,
					autoplay: true
				} %}

				<div class="video_callout_body">
					<div class="video_callout_description">
						{{ description }}
					</div>

					<div class="video_callout_actions">
						<div class="video_callout_action">
							<a class="video_callout_appender" href="#">
								<span class="video_callout_appender_label">
									Watch Video
								</span>
							</a>
						</div>
					</div>
				</div>

				<div class="js-background-video-wrapper page_header_bg_video" data-background-video='{{ video_options|json_encode }}'>
					<div class="page_header_bg_video_iframe_wrap">
						<div class="page_header_bg_video_iframe_target js-iframe-target"></div>
					</div>

					<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>

				{% render '@partial-lazy-video' with {
					class: 'video_callout',
				} %}
			</div>
		</div>
	</div>
</div>

No notes defined.