CCGA Component Library

Media Header Top: Atmospheric 

<div class="media_header_top has_video">
    <div class="media_header_top_inner">
        <div class="media_header_top_atm_media">
            <figure class="media_header_top_atm_background">
                <span class="lazy_image_wrapper media_header_top_atm_background_image_wrapper">
                    <picture class="media_header_top_atm_background_picture">
                        <source media="(min-width: 1374px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/1440x617/5">
                        <source media="(min-width: 1220px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/1220x523/5">
                        <source media="(min-width: 980px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/980x420/5">
                        <source media="(min-width: 740px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/740x416/5">
                        <source media="(min-width: 500px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x282/5">
                        <img class="js-lazy js-lazyload media_header_top_atm_background_image" src="../../../images/placeholder.png" data-src="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/5" alt="">
                    </picture>
                </span>
                <noscript>
                    <picture class="media_header_top_atm_background_picture">
                        <source media="(min-width: 1374px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/1440x617/5">
                        <source media="(min-width: 1220px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/1220x523/5">
                        <source media="(min-width: 980px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/980x420/5">
                        <source media="(min-width: 740px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/740x416/5">
                        <source media="(min-width: 500px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x282/5">
                        <img class="media_header_top_atm_background_image" src="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/5" alt="">
                    </picture>
                </noscript>
            </figure>
            <div class="js-mht-youtube-wrapper media_header_top_atm_video" data-youtubeid="43D7tYgnPcg">
                <div class="js-mht-youtube-iframe media_header_top_atm_iframe" id="js-mht-youtube-iframe"></div>
                <div class="media_header_top_atm_video_controls">
                    <button class="js-media-header-top-atm-video-play-toggle media_header_top_atm_video_play_toggle ">
                        <span class="media_header_top_atm_video_play_toggle_inner_default media_header_top_atm_video_play_toggle_inner">
                            <span class="media_header_top_atm_video_play_toggle_label_default media_header_top_atm_video_play_toggle_label">Play</span>
                            <span class="media_header_top_atm_video_play_toggle_icon_default media_header_top_atm_video_play_toggle_icon" aria-hidden="true">
                                <span class="media_header_top_atm_video_play_toggle_icon_inner_default media_header_top_atm_video_play_toggle_icon_inner">
                                    <span class="media_header_top_atm_video_play_toggle_icon_space">&#xfeff;</span>

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

                                </span>
                            </span>
                        </span>
                    </button>
                    <button class="js-media-header-top-atm-video-pause-toggle media_header_top_atm_video_pause_toggle ">
                        <span class="media_header_top_atm_video_pause_toggle_inner_default media_header_top_atm_video_pause_toggle_inner">
                            <span class="media_header_top_atm_video_pause_toggle_label_default media_header_top_atm_video_pause_toggle_label">Pause</span>
                            <span class="media_header_top_atm_video_pause_toggle_icon_default media_header_top_atm_video_pause_toggle_icon" aria-hidden="true">
                                <span class="media_header_top_atm_video_pause_toggle_icon_inner_default media_header_top_atm_video_pause_toggle_icon_inner">
                                    <span class="media_header_top_atm_video_pause_toggle_icon_space">&#xfeff;</span>

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

                                </span>
                            </span>
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
</div>
 
<div class="media_header_top {% if youtubeID %}has_video{% endif %}">
	<div class="media_header_top_inner">
		<div class="media_header_top_atm_media">
			<figure class="media_header_top_atm_background">
				{% render '@partial-picture' with {
					class: 'media_header_top_atm_background',
					alt: '',
					image: background,
					default: img.wide.xxsml,
					sources: {
						"1374px": img.ultrawide.xlrg,
						"1220px": img.ultrawide.lrg,
						"980px": img.ultrawide.med,
						"740px": img.wide.sml,
						"500px": img.wide.xsml
					}
				} %}
			</figure>
			{% if youtubeID %}
				<div class="js-mht-youtube-wrapper media_header_top_atm_video" data-youtubeid="{{ youtubeID }}">
					<div class="js-mht-youtube-iframe media_header_top_atm_iframe" id="js-mht-youtube-iframe"></div>
					<div class="media_header_top_atm_video_controls">
						{% render "@partial-button-toggle" with {
							class: "media_header_top_atm_video_play",
							title: "Play",
							icon: "play",
							js: true
						} %}
						{% render "@partial-button-toggle" with {
							class: "media_header_top_atm_video_pause",
							title: "Pause",
							icon: "pause",
							js: true
						} %}
					</div>
				</div>
			{% endif %}
		</div>
	</div>
	<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
</div>

No notes defined.