CCGA Component Library

Video Wide Microsite 

<div class="video_wide">
    <div class="fs-row">
        <div class="fs-cell fs-lg-8 fs-lg-justify-center">

            <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 class="video_wide">
	<div class="fs-row">
		<div class="fs-cell {{ cell }} fs-lg-justify-center">
			{% if title or description %}
			<div class="video_wide_header">
				{% if title %}
				<h2 class="video_wide_title">{{ title }}</h2>
				<span class="video_wide_description">{{ description }}</span>
				{% endif %}
			</div>
			{% endif %}

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

No notes defined.