Video Detail

300 × 150
<!-- Page Feature -->
<div class="page_feature" id="skip_content" tabindex="-1">
    <div class="video_detail_top">
        <div class="video_detail_top_inner">

            <div class="video_detail_top_breadcrumbs">
                <div class="fs-row">
                    <div class="fs-cell">
                        <div class="breadcrumb">
                            <nav class="breadcrumb_nav" aria-labelledby="breadcrumb_nav_title">
                                <div class="breadcrumb_nav_header">
                                    <h2 class="breadcrumb_nav_title" id="breadcrumb_nav_title">You are here:</h2>
                                </div>
                                <ol class="breadcrumb_list multiple" aria-labelledby="breadcrumb_nav_title">
                                    <li class="breadcrumb_item breadcrumb_item_home">
                                        <a class="breadcrumb_pill breadcrumb_pill_link" href="page-home.html" aria-label="Home">
                                            <span class="breadcrumb_pill_inner">
                                                <span class="breadcrumb_pill_icon" aria-hidden="true">
                                                    <svg class="icon icon_home">
                                                        <use href="/images/icons.svg#home" />
                                                    </svg>
                                                </span>

                                                <span class="breadcrumb_pill_icon_back" aria-hidden="true" aria-label="Go Back">
                                                    <svg class="icon icon_arrow_back_breadcrumbs">
                                                        <use href="/images/icons.svg#arrow_back_breadcrumbs" />
                                                    </svg>
                                                </span>

                                                <span class="breadcrumb_pill_label">Home</span>
                                            </span>
                                        </a>
                                        <span class="breadcrumb_divider" aria-hidden="true">
                                            <svg class="icon icon_caret_right">
                                                <use href="/images/icons.svg#caret_right" />
                                            </svg>
                                        </span>
                                    </li>
                                    <li class="breadcrumb_item">
                                        <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                            <span class="breadcrumb_pill_inner">
                                                <span class="breadcrumb_pill_label">Commentary & Analysis</span>
                                            </span>
                                        </a>
                                        <span class="breadcrumb_divider" aria-hidden="true">
                                            <svg class="icon icon_caret_right">
                                                <use href="/images/icons.svg#caret_right" />
                                            </svg>
                                        </span>
                                    </li>
                                    <li class="breadcrumb_item">
                                        <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                            <span class="breadcrumb_pill_inner">
                                                <span class="breadcrumb_pill_label">Video Series</span>
                                            </span>
                                        </a>
                                        <span class="breadcrumb_divider" aria-hidden="true">
                                            <svg class="icon icon_caret_right">
                                                <use href="/images/icons.svg#caret_right" />
                                            </svg>
                                        </span>
                                    </li>
                                    <li class="breadcrumb_item">
                                        <span class="breadcrumb_pill">
                                            <span class="breadcrumb_pill_inner">
                                                <span class="breadcrumb_pill_label">Page Title</span>
                                            </span>
                                        </span>
                                    </li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>

            <div class="video_detail_top_body">

                <div class="fs-row video_detail_top_body_row">
                    <div class="fs-cell video_detail_top_body_cell">

                        <div class="video_detail_top_body_inner">
                            <div class="video_detail_top_body_header">
                                <h1 class="video_detail_top_title">What Happens to Germany after Merkel is Gone?</h1>
                                <div class="video_detail_top_labels">
                                    <span class="video_detail_top_label_type">
                                        Video Series
                                    </span>
                                    <span class="video_detail_top_label_series">
                                        <a href="#">#ASKIVO</a>
                                    </span>
                                </div>
                            </div>
                            <div class="video_detail_top_body_content">
                                <div class="video_detail_top_intro">
                                    <span class="video_detail_top_intro_label">Angela Merkel has said she will step down in 2021. In the latest #AksIvo, Council President Ivo Daadler looks at three big issues surrounding her departure.</span>
                                </div>
                                <time class="video_detail_top_date" datetime="2020-08-12">
                                    August 12, 2020
                                </time>
                                <figure class="video_detail_top_figure has_credit">
                                    <span class="lazy_image_wrapper video_detail_top_image_wrapper">
                                        <img class="js-lazy js-lazyload video_detail_top_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/300x169/4" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/4 300w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/4 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/4 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/4 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/4 1220w, //images.fastspot.com/the-chicago-council-on-global-affairs/1440x810/4 1440w" alt="">
                                    </span>
                                    <noscript>
                                        <img class="video_detail_top_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/1440x810/4" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/1440x810/4 1440w, //images.fastspot.com/the-chicago-council-on-global-affairs/1220x686/4 1220w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/4 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/4 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/4 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/300x169/4 300w" sizes="100vw" alt="">
                                    </noscript>
                                    <a href="https://www.youtube.com/watch?v=KYbs0ZK07Ws" class="video_detail_top_player_link js-video-appender">
                                        <span class="video_detail_top_player_link_label">Play Video</span>
                                        <span class="video_detail_top_player_link_icon">
                                            <svg class="icon icon_podcast_play">
                                                <use href="/images/icons.svg#podcast_play" />
                                            </svg>
                                        </span>
                                    </a>
                                    <div class="video_detail_top_img_credit">
                                        <div class="video_detail_top_img_credit_inner">
                                            Reuters
                                        </div>
                                    </div>
                                </figure>
                            </div>
                        </div>

                    </div>
                </div>

            </div>

        </div>
    </div>
</div>
<!-- END: Page Feature -->

<!-- Page Content -->
<div class="page_content">
    <div class="fs-row">
        <div class="fs-cell fs-lg-8">
            <div class="typography">

                <h2>Curabitur Non Leo Non</h2>
                <p>Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
                <h2>Consecutur Accumasan</h2>
                <p>Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>

            </div>
        </div>
        <div class="fs-cell fs-lg-4 fs-xl-3 fs-xl-push-1">
            <div class="sidebar js-sidebar">
                <div class="sidebar_inner">
                    <div class="sidebar_meta">

                        <div class="sidebar_meta_detail sidebar_meta_detail_issues">
                            <span class="sidebar_meta_detail_heading">Issues</span>
                            <a href="#" class="sidebar_meta_detail_link">Global Cities</a>
                        </div>

                        <div class="sidebar_meta_detail sidebar_meta_detail_regions">
                            <span class="sidebar_meta_detail_heading">Regions</span>
                            <a href="" class="sidebar_meta_detail_link">Europe</a>
                        </div>

                    </div>
                    <div class="sidebar_buttons">

                        <a class="button theme_global_blue button--with-divider button--with-icon" href="#">
                            <span class="button_text">
                                Back to Video Listing
                            </span>

                            <span class="button_icon">

                                <svg class="icon icon_arrow_right">
                                    <use href="/images/icons.svg#arrow_right" />
                                </svg>

                            </span>
                        </a>

                        <div class="js-share-tools share_tools">
                            <div class="share_tools_header">
                                <h2 class="share_tools_title">Share Options</h2>
                                <button class="button theme_mint_green button--with-divider js-share-tools-toggle share_tools_toggle" data-swap-target=".js-share-tools" type="button">
                                    <span class="button_text">
                                        Share This Video
                                    </span>

                                    <span class="button_icon">

                                        <svg class="icon icon_share">
                                            <use href="/images/icons.svg#share" />
                                        </svg>

                                    </span>
                                </button>
                            </div>
                            <ul class="js-share-tools-list share_tools_list" aria-label="Share Options">
                                <li class="js-share-tool-item share_tool_item">
                                    <a class="js-share-tool js-share-twitter share_tool" href="#" target="_blank" rel="noopener">
                                        <span class="share_tool_icon">
                                            <svg class="icon icon_twitter">
                                                <use href="/images/icons.svg#twitter" />
                                            </svg>
                                        </span>
                                        <span class="share_tool_label">Share to Twitter</span>
                                    </a>
                                </li>
                                <li class="js-share-tool-item share_tool_item">
                                    <a class="js-share-tool js-share-facebook share_tool" href="#" target="_blank" rel="noopener">
                                        <span class="share_tool_icon">
                                            <svg class="icon icon_facebook">
                                                <use href="/images/icons.svg#facebook" />
                                            </svg>
                                        </span>
                                        <span class="share_tool_label">Share to Facebook</span>
                                    </a>
                                </li>
                                <li class="js-share-tool-item share_tool_item">
                                    <a class="js-share-tool js-share-linkedin share_tool" href="#" target="_blank" rel="noopener">
                                        <span class="share_tool_icon">
                                            <svg class="icon icon_linkedin">
                                                <use href="/images/icons.svg#linkedin" />
                                            </svg>
                                        </span>
                                        <span class="share_tool_label">Share to Linkedin</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Page Content -->

<!-- Full Width Callouts -->
<div class="full_width_callouts"></div>
<!-- END: Full Width Callouts -->
<!-- Page Feature -->
<div class="page_feature" id="skip_content" tabindex="-1">
	{% render "@component-video-detail-top" %}
</div>
<!-- END: Page Feature -->

<!-- Page Content -->
<div class="page_content">
	<div class="fs-row">
		<div class="fs-cell {{ cell }}">
			<div class="typography">
				{% render "@partial-wysiwyg--simple" with wysiwyg_context %}
			</div>
		</div>
		<div class="fs-cell {{ cell_sidebar }}">
			<div class="sidebar js-sidebar">
				<div class="sidebar_inner">
					{% render "@component-sidebar-meta" with {
						event_series: '',
						issues: [
							{
								name: 'Global Cities',
								url: '#'
							}
						],
						regions: [
							{
								name: 'Europe',
								url: ''
							}
						]
					} %}

					<div class="sidebar_buttons">
						{% render "@partial-button--global-blue-with-divider" with {
							text: 'Back to Video Listing'
						} %}

						{% render "@partial-share" with {
							label: "Share This Video"
						} %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Page Content -->

<!-- Full Width Callouts -->
<div class="full_width_callouts"></div>
<!-- END: Full Width Callouts -->

No notes defined.