CCGA Component Library

Video Wide Anniversary 100 

<div class="video_wide">
    <div class="fs-row">
        <div class="fs-cell fs-lg-8 fs-lg-justify-center">
            <div class="media_grid_item">
                <figure class="media_grid_item_figure">
                    <span class="lazy_image_wrapper media_grid_item_image_wrapper">
                        <img class="js-lazy js-lazyload media_grid_item_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/300x169/5" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/5 300w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/5 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/5 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/5 980w" alt="">
                    </span>
                    <noscript>
                        <img class="media_grid_item_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/980x552/5" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/980x552/5 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/5 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/5 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/300x169/5 300w" sizes="100vw" alt="">
                    </noscript>
                    <a href="https://www.youtube.com/watch?v=8Rhc-IOaiHg" class="media_grid_item_video_link js-video-appender">
                        <span class="media_grid_item_video_link_label">Play Video</span>
                        <span class="media_grid_item_video_link_icon">
                            <svg class="icon icon_podcast_play">
                                <use href="/images/icons.svg#podcast_play" />
                            </svg>
                        </span>
                    </a>
                </figure>
                <div class="media_grid_item_text">
                    Margaret Thatcher speaks to the Council.
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="video_wide">
	<div class="fs-row">
		<div class="fs-cell {{ cell }} fs-lg-justify-center">
			<div class="media_grid_item">
				<figure class="media_grid_item_figure">
					{% render "@partial-image" with {
						class: "media_grid_item",
						image: image,
						sources: [
							img.wide.med,
							img.wide.sml,
							img.wide.xsml,
							img.wide.xxsml
						]
					} %}
					{% if video %}
					<a href="{{ video }}" class="media_grid_item_video_link js-video-appender">
						<span class="media_grid_item_video_link_label">Play Video</span>
						<span class="media_grid_item_video_link_icon">{{ icon("podcast_play") }}</span>
					</a>
					{% endif %}
				</figure>
				{% if text %}
				<div class="media_grid_item_text">
					{{ text }}
				</div>
				{% endif %}
			</div>
		</div>
	</div>
</div>

No notes defined.