CCGA Component Library

C Feature Media: Atmospheric 

<div class="c_feature_media ">
    <div class="c_feature_media_mask">
        <div class="c_feature_media_video">
            <div class="js-atmospheric-feature atmospheric_feature has_video">
                <div class="atmospheric_feature_inner">
                    <div class="atmospheric_feature_media">
                        <figure class="atmospheric_feature_background">
                            <span class="lazy_image_wrapper atmospheric_feature_background_image_wrapper">
                                <picture class="atmospheric_feature_background_picture">
                                    <source media="(min-width: 1220px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/1080x1440/5">
                                    <source media="(min-width: 980px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/980x980/5">
                                    <source media="(min-width: 740px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/740x740/5">
                                    <source media="(min-width: 500px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x500/5">
                                    <img class="js-lazy js-lazyload atmospheric_feature_background_image" src="../../../images/placeholder.png" data-src="//images.fastspot.com/the-chicago-council-on-global-affairs/500x500/5" alt="">
                                </picture>
                            </span>
                            <noscript>
                                <picture class="atmospheric_feature_background_picture">
                                    <source media="(min-width: 1220px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/1080x1440/5">
                                    <source media="(min-width: 980px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/980x980/5">
                                    <source media="(min-width: 740px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/740x740/5">
                                    <source media="(min-width: 500px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x500/5">
                                    <img class="atmospheric_feature_background_image" src="//images.fastspot.com/the-chicago-council-on-global-affairs/500x500/5" alt="">
                                </picture>
                            </noscript>
                        </figure>
                        <div class="js-atmospheric-youtube-wrapper atmospheric_feature_video" data-youtubeid="43D7tYgnPcg">
                            <div class="js-atmospheric-youtube-iframe atmospheric_feature_iframe" id="js-atmospheric-youtube-iframe"></div>
                            <div class="atmospheric_feature_video_controls">
                                <button class="js-atmospheric-feature-video-play-toggle atmospheric_feature_video_play_toggle ">
                                    <span class="atmospheric_feature_video_play_toggle_inner_default atmospheric_feature_video_play_toggle_inner">
                                        <span class="atmospheric_feature_video_play_toggle_label_default atmospheric_feature_video_play_toggle_label">Play</span>
                                        <span class="atmospheric_feature_video_play_toggle_icon_default atmospheric_feature_video_play_toggle_icon" aria-hidden="true">
                                            <span class="atmospheric_feature_video_play_toggle_icon_inner_default atmospheric_feature_video_play_toggle_icon_inner">
                                                <span class="atmospheric_feature_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-atmospheric-feature-video-pause-toggle atmospheric_feature_video_pause_toggle ">
                                    <span class="atmospheric_feature_video_pause_toggle_inner_default atmospheric_feature_video_pause_toggle_inner">
                                        <span class="atmospheric_feature_video_pause_toggle_label_default atmospheric_feature_video_pause_toggle_label">Pause</span>
                                        <span class="atmospheric_feature_video_pause_toggle_icon_default atmospheric_feature_video_pause_toggle_icon" aria-hidden="true">
                                            <span class="atmospheric_feature_video_pause_toggle_icon_inner_default atmospheric_feature_video_pause_toggle_icon_inner">
                                                <span class="atmospheric_feature_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 class="js-atmospheric-feature-content atmospheric_feature_content">
                        <div class="atmospheric_feature_content_inner">
                            <h2 class="atmospheric_feature_title"></h2>
                        </div>
                        <div class="js-atmospheric-feature-content_spacer atmospheric_feature_content_spacer">
                        </div>
                    </div>
                </div>
                <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
            </div>
        </div>
    </div>
</div>
 
<div class="c_feature_media {{ class }}">
	<div class="c_feature_media_mask">
		{% if atmospheric %}
			<div class="c_feature_media_video">
				{% render '@component-atmospheric' with atmospheric_config %}
			</div>
		{% else %}
			{% render "@partial-image" with {
				class: "c_feature_media",
				alt: '{{ alt }}',
				image: image,
			} %}
		{% endif %}
	</div>
</div>

No notes defined.