CCGA Component Library

Media Header Top 

<div class="media_header_top ">
    <div class="media_header_top_inner">
        <div class="media_header_top_content">
            <div class="media_header_top_video_wrap">

                <figure class="media_header_top_figure">
                    <span class="lazy_image_wrapper media_header_top_image_wrapper">
                        <img class="js-lazy js-lazyload media_header_top_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/500x282/1" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x282/1 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/1 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/1 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/1 1220w, //images.fastspot.com/the-chicago-council-on-global-affairs/1440x810/1 1440w" alt="">
                    </span>
                    <noscript>
                        <img class="media_header_top_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/1440x810/1" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/1440x810/1 1440w, //images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/1 1220w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/1 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/1 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/1 500w" sizes="100vw" alt="">
                    </noscript>
                </figure>

            </div>
        </div>
    </div>
</div>
 
<div class="media_header_top {% if youtubeID %}has_video{% endif %}">
	<div class="media_header_top_inner">
		<div class="media_header_top_content">
			<div class="media_header_top_video_wrap">

				{% if youtubeID %}
					<div class="media_header_top_video">
						<iframe class="js-background-video-iframe media_header_top_iframe" src="//youtube.com/embed/{{ youtubeID }}?autoplay=0&mute=0&controls=1&rel=0&playsinline=0" title="{{ video_title }} video" allow="autoplay fullscreen"></iframe>
					</div>
				{% endif %}

				<figure class="media_header_top_figure">
					{% render "@partial-image" with {
						class: "media_header_top",
						alt: "",
						image: image,
						sources: [
							img.wide.xlrg,
							img.wide.lrg,
							img.wide.med,
							img.wide.sml,
							img.wide.xsml
						]
					} %}
				</figure>

				{% if image_caption %}
					<figcaption class="media_header_top_figcaption">
						{{ image_caption }}
					</figcaption>
				{% endif %}
			</div>
		</div>
	</div>
</div>

No notes defined.