<figure class="c-figure{{#if settings.figureContextClass}}--{{settings.figureContextClass}}{{else}}--default{{/if}}{{#if
		settings.figureClasses}} {{settings.figureClasses}}{{/if}}"
        data-css="c-figure"{{#if settings.figureId}} id="{{settings.figureId}}"{{/if}}{{#if settings.figureJsModule}}
        data-js-module="{{settings.figureJsModule}}"{{#if settings.figureJsOptions}}
        data-js-options='{{stringify settings.figureJsOptions}}'{{/if}}{{/if}}>
	<div class="figure__wrapper">
		{{#if (isObject content.figurePicture)}}
			{{> picture content.figurePicture}}
			{{#if content.figurePlay}}
				<span class="figure__play-icon"><span class="figure__play-text">{{content.figurePlayText}}</span></span>
			{{/if}}
			{{#if content.figureLBVideo}}
				<button type="button" class="figure__play-lbvideo" aria-haspopup="true" aria-controls="overlay" aria-expanded="false" data-js-item="overlay-handler-cta" data-content="{ &quot;youtube&quot;: {&quot;id&quot;: &quot;mM5_T-F1Yn4&quot;,&quot;format&quot;: &quot;4_3&quot;}, &quot;caption&quot;: {&quot;captionHeadline&quot;:&quot;Youtube Video Headline&quot;,&quot;captionContent&quot;:&quot;Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.&quot;} }">Lightbox öffnen</button>
			{{/if}}
			{{#if content.figureZoom}}
				<button type="button" class="c-cta--image-zoom" aria-haspopup="true" aria-expanded="false"
				        data-js-item="overlay-handler-cta"
				        data-content='{ "image": { "src": "https://placehold.co/2000x1000", "altText": "Some alt text"}, "caption": {"captionHeadline": "Caption Headline", "captionContent": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."}, "metainfo": {"items": [{"text": "© imageworks"}]} }'>
					Vergrößern
				</button>
			{{/if}}
		{{else}}
			{{#if (isObject content.figureVideo)}}
				{{> video content.figureVideo}}
			{{else}}
				{{#if (isObject content.figureEmbeddedVideo)}}
					{{> video-embeded content.figureEmbeddedVideo}}
				{{else}}
					{{#if (isObject content.figureAudio)}}
						{{> audio content.figureAudio}}
					{{else}}
						<h2 style="color: red">Please provide a picture or video or audio for your figure!</h2>
					{{/if}}
				{{/if}}
			{{/if}}
		{{/if}}

	</div>

	{{#if (isObject content.figureCaption)}}
		<figcaption
				class="figure__caption{{#if settings.figureCaptionClasses}} {{settings.figureCaptionClasses}}{{/if}}">
			{{> figure__caption content.figureCaption}}
		</figcaption>
	{{/if}}
</figure>

figure__caption.hbs

<div class="figure__caption-inner">
	{{#if captionHeadline}}
		<h3 class="figure__caption-headline">{{captionHeadline}}</h3>
	{{/if}}
	{{#if captionContent}}
		<p class="figure__caption-content">{{captionContent}}</p>
	{{/if}}
</div>

_figure.scss

/* ===================================================
FIGURE COMPONENT
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-figure"] {
	display: block;
	margin-bottom: 60px;

	// modifier
	&.is-no-margin {
		margin-bottom: 0;
	}

	.figure__wrapper {
		position: relative;
	}

	.figure__zoom {
		@include hidden-text();

		display: none;
		position: absolute;
		bottom: 0;
		right: 0;
		width: 40px;
		height: 40px;
		background-color: rgba($color-dark, 1);
		cursor: pointer;
		transition: background $animation-duration-std $animation-easing-std, border $animation-duration-std $animation-easing-std;
		border: 1px solid transparent;

		@include bp($bp-tablet-p) {
			display: block;
		}

		@include print() {
			display: none;
		}

		&:hover,
		&.a11y-focus-key {
			background-color: rgba($color-white, 1);
			border: 1px solid $color-green;

			&::before {
				opacity: 0;
			}

			&::after {
				opacity: 1;
			}
		}

		&::before {
			@include pseudo();
			@include sprites-icon-expand-white();
			@include centering(hv);

			position: absolute;
			transition: opacity $animation-duration-std $animation-easing-std;
			opacity: 1;
		}

		&::after {
			@include pseudo();
			@include sprites-icon-expand-green();
			@include centering(hv);

			position: absolute;
			transition: opacity $animation-duration-std $animation-easing-std;
			opacity: 0;
		}

		@include hcm() {
			font-size: 16px;
			color: $color-dark;
			height: auto;
			width: auto;
			background: transparent;
			padding: 5px;
		}
	}

	.figure__play-lbvideo {
		@include hidden-text();
		@include centering(hv);

		cursor: pointer;
		outline: 0;
		width: 80px;
		height: 80px;
		display: block;
		position: absolute;
		cursor: pointer;
		border: 1px solid transparent;
		background-color: transparent;

		@include print() {
			display: none;
		}

		&:hover,
		&.a11y-focus-key {

			border: 1px solid transparent;

			&::before {
				opacity: 0;
			}

			&::after {
				opacity: 1;
			}
		}

		&::before {
			@include pseudo();
			@include sprites-icon-video-big-black();

			position: absolute;
			transition: opacity $animation-duration-std $animation-easing-std;
			opacity: 1;
			top: 0px;
			left: 0px;
			transform: scale(.6);

			@include bp($bp-tablet-p) {
				transform: scale(.8);
			}
		}

		&::after {
			@include pseudo();
			@include sprites-icon-video-big-green();

			position: absolute;
			transition: opacity $animation-duration-std $animation-easing-std;
			opacity: 0;
			background-color: $color-white;
			top: 0px;
			left: 0px;
			transform: scale(.6);

			@include bp($bp-tablet-p) {
				transform: scale(.8);
			}
		}

		@include hcm() {
			font-size: 16px;
			color: $color-dark;
			height: auto;
			width: auto;
			background: transparent;
			padding: 5px;
		}
	}

	.figure__play-icon {
		@include centering(hv);

		cursor: pointer;
		display: block;
		height: 80px;
		width: 80px;

		@include print() {
			display: none;
		}

		&::before {
			@include pseudo();
			@include sprites-icon-video-big-black();

			position: absolute;
			transition: opacity $animation-duration-std $animation-easing-std;
			opacity: 1;
			transform: scale(.6);

			@include bp($bp-tablet-p) {
				transform: scale(.8);
			}
		}

		&::after {
			@include pseudo();
			@include sprites-icon-video-big-green();

			transition: opacity $animation-duration-std $animation-easing-std;
			opacity: 0;
			transform: scale(.6);
			background-color: $color-white;

			@include bp($bp-tablet-p) {
				transform: scale(.8);
			}
		}

		@include hcm() {
			font-size: 16px;
			color: $color-dark;
			height: auto;
			width: auto;
			background: transparent;
			padding: 5px;
		}

		.figure__play-text {
			@include aural();
		}
	}

	.figure__caption-headline {
		display: block;
		width: 100%;
		margin-left: 0;
		font-size: 1.3rem;
		line-height: (17/13);
		font-family: $font-bold;
		font-weight: 700;
		margin-top: 10px;
		margin-bottom: 0;
	}

	.figure__caption-content {
		width: 100%;
		flex: none;
		margin-left: 0;
		margin-top: 5px;
		margin-bottom: 0;
		font-size: 1.2rem;
		line-height: (17/12);
		font-family: $font-regular;
		font-weight: 400;
		letter-spacing: .5px;
		color: $color-dark;
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-figure--default {

	.figure__caption {
		margin-top: 5px;
		display: inline-block;
	}
}

/* ---------------------------------------------------
Context: RTE
--------------------------------------------------- */
.c-figure--rte {
	@include bp($bp-tablet-p) {
		@include grid-column-width(8);
		@include grid-push-h(2);
	}

	/*
	MODIFIERS
	----------------------- */
	&.is-rte-embed {
		@include grid-column(12);

		display: inline-block;
		margin-bottom: 50px;

		@include bp($bp-tablet-p) {
			@include grid-column(6);
		}

		@include bp($bp-tablet-l) {
			@include grid-column(4);
		}

		/*
		MODIFIERS
		----------------------- */
		&.is-right {
			float: right;
			margin-left: 40px;
		}

		&.is-left {
			margin-left: 0;
			margin-right: 40px;
		}
	}

	.figure__caption {
		margin-top: 5px;
		display: inline-block;
	}

	.picture__image {
		@include print() {
			width: 25% !important;
		}
	}
}

/* ---------------------------------------------------
Context: Teaser
--------------------------------------------------- */
.c-figure--teaser-double,
.c-figure--teaser-dossier {
	margin-bottom: 0;

	.figure__caption {
		margin-top: 5px;
		display: inline-block;
	}
}

/* ---------------------------------------------------
Context: Video
--------------------------------------------------- */
.c-figure--video {
	@include print() {
		display: none;
	}

	.figure__caption {
		margin-top: 5px;
		display: inline-block;
	}
}

/* ---------------------------------------------------
Context: Audio
--------------------------------------------------- */
.c-figure--audio {
	@include print() {
		display: none;
	}

	.figure__caption {
		margin-top: 5px;
		display: inline-block;
	}
}

/* ---------------------------------------------------
Context: Overlay
--------------------------------------------------- */
.c-figure--overlay {
	margin: 0 auto;
	max-width: 100vh;
	width: 100%;
	height: 100%;
	max-height: 100vw;

	&.is-person {
		max-width: $bp-desktop-m;
		max-height: none;
	}

	.figure__videoembed {
		position: relative;
		padding-top: 0;
		height: 0;
		overflow: hidden;
	}

	.figure__videoembed_16_9, .figure__videoembed {
		padding-bottom: 56.25%;
	}
	.figure__videoembed_4_3 {
		padding-bottom: 75%;
	}

	.figure__youtube, .figure__vimeo, .figure__lrzplayer {
		position: absolute;
		padding-top: 0;
		height: 0;
		overflow: hidden;
		width: 100%;
		height: 100%;

	}

	.figure__caption-headline {
		color: $color-white;
	}

	.figure__caption {
		display: block;
		margin: 10px auto 0;
		padding: 0 20px;

		@include bp($bp-tablet-p) {
			padding: 0;
		}
	}

	.figure__caption-content {
		color: $color-white;
	}

	.figure__metainfo-list {
		color: $color-gray;
		font-size: 1.2rem;
		line-height: (17/12);
		display: block;
		margin: 10px auto 0;
		padding: 0 20px;

		@include bp($bp-tablet-p) {
			padding: 0;
		}
	}

	.figure__metainfo-list-item {
		position: relative;
		display: inline-block;
		padding: 0 5px;
		color: $color-white;

		&:first-child {
			padding-left: 0;
		}

		&:last-child {

			&::after {
				content: none;
			}
		}

		&::after {
			@include pseudo();

			top: 50%;
			right: -2px;
			width: 1px;
			height: 10px;
			transform: translateY(-50%);
			background-color: $color-gray;
		}
	}

	.figure__metainfo-link {
		color: $color-green60;
		text-decoration: none;

		&:hover,
		&.a11y-focus-key {
			color: $color-white;

			&::before {
				@include sprites-icon-arrow-white();

				position: relative;
				display: inline-block;
			}
		}

		&::before {
			@include pseudo();
			@include sprites-icon-arrow-green60();

			position: relative;
			display: inline-block;
			top: 3px;
			margin-right: 5px;
			vertical-align: unset;
			transform: scale(.7);
		}
	}
}

.c-figure--overlay--slider {
	margin-bottom: 10px;
}

/* ---------------------------------------------------
Context: SearchOverlayTeaser
--------------------------------------------------- */
.c-figure--search-overlay-teaser {
	margin-bottom: 15px;
}

/* ---------------------------------------------------
Context: Header-Frontpage / Einsichten (Header und Teaser Highlight Modul)
--------------------------------------------------- */
.c-figure--header-frontpage, .c-figure--einsichten {
	margin-bottom: 0;
}

/* ---------------------------------------------------
Context: Header-Newsroom
--------------------------------------------------- */
.c-figure--header-newsroom {
	margin-bottom: 0;
}

/* ---------------------------------------------------
Context: Header-Newsroom
--------------------------------------------------- */
.c-figure--teaser-single {
	margin: 0 !important;
	width: 100% !important;
	flex: 0 0 100% !important;
	position: absolute;
	bottom: 0;
}

Default with picture

<figure class="c-figure--simple" data-css="c-figure" id="figure-content">
	<div class="figure__wrapper">
		<picture class="c-picture--default
				 lazyload" data-css="c-picture">
			<!--[if IE 9]><audio><![endif]-->
			<source data-srcset="
				 https://placehold.co/400x200  400w  , 
				 https://placehold.co/800x400  800w  , 
				 https://placehold.co/1200x600  1200w  , 
				 https://placehold.co/1600x800  1600w  , 
				 https://placehold.co/2000x1000  2000w  , 
				 https://placehold.co/2400x1200  2400w  , 
				 https://placehold.co/2800x1400  2800w  , 
				 https://placehold.co/3200x1600  3200w  " />
			<!--[if IE 9]></audio><![endif]-->
			<img class="
				 picture__image lazyload" src="https://placehold.co/20x10" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
		</picture>
	</div>
</figure>

Default with picture

<figure class="c-figure--rte" data-css="c-figure" id="figure-content">
	<div class="figure__wrapper">
		<picture class="c-picture--rte
				 lazyload" data-css="c-picture">
			<!--[if IE 9]><audio><![endif]-->
			<source data-srcset="
				 https://placehold.co/400x200  400w  , 
				 https://placehold.co/800x400  800w  , 
				 https://placehold.co/1200x600  1200w  , 
				 https://placehold.co/1600x800  1600w  , 
				 https://placehold.co/2000x1000  2000w  , 
				 https://placehold.co/2400x1200  2400w  , 
				 https://placehold.co/2800x1400  2800w  , 
				 https://placehold.co/3200x1600  3200w  " />
			<!--[if IE 9]></audio><![endif]-->
			<img class="
				 picture__image lazyload" src="https://placehold.co/20x10" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
		</picture>
	</div>
	<figcaption class="figure__caption">
		<div class="figure__caption-inner">
			<h3 class="figure__caption-headline">Caption Headline</h3>
			<p class="figure__caption-content">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
		</div>
	</figcaption>
</figure>

Default with picture

<figure class="c-figure--rte is-rte-embed is-right" data-css="c-figure" id="figure-content" data-js-module="overlay-handler">
	<div class="figure__wrapper">
		<picture class="c-picture--default
				 lazyload" data-css="c-picture">
			<!--[if IE 9]><audio><![endif]-->
			<source data-srcset="
				 https://placehold.co/400x400  400w  , 
				 https://placehold.co/800x800  800w  , 
				 https://placehold.co/1200x1200  1200w  , 
				 https://placehold.co/1600x1600  1600w  , 
				 https://placehold.co/2000x2000  2000w  , 
				 https://placehold.co/2400x2400  2400w  , 
				 https://placehold.co/2800x2800  2800w  , 
				 https://placehold.co/3200x3200  3200w  " />
			<!--[if IE 9]></audio><![endif]-->
			<img class="
				 picture__image lazyload" src="https://placehold.co/20x20" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
		</picture>
		<button type="button" class="c-cta--image-zoom" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "image": { "src": "https://placehold.co/2000x1000", "altText": "Some alt text"}, "caption": {"captionHeadline": "Caption Headline", "captionContent": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."}, "metainfo": {"items": [{"text": "© imageworks"}]} }'>
			Vergrößern
		</button>
	</div>
	<figcaption class="figure__caption">
		<div class="figure__caption-inner">
			<h3 class="figure__caption-headline">Caption Headline</h3>
			<p class="figure__caption-content">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
		</div>
	</figcaption>
</figure>

Default with video in Lightbox

<figure class="c-figure--rte is-rte-embed is-left" data-css="c-figure" id="figure-content" data-js-module="overlay-handler">
	<div class="figure__wrapper">
		<picture class="c-picture--default
				 lazyload" data-css="c-picture">
			<!--[if IE 9]><audio><![endif]-->
			<source data-srcset="
				 https://placehold.co/400x400  400w  , 
				 https://placehold.co/800x800  800w  , 
				 https://placehold.co/1200x1200  1200w  , 
				 https://placehold.co/1600x1600  1600w  , 
				 https://placehold.co/2000x2000  2000w  , 
				 https://placehold.co/2400x2400  2400w  , 
				 https://placehold.co/2800x2800  2800w  , 
				 https://placehold.co/3200x3200  3200w  " />
			<!--[if IE 9]></audio><![endif]-->
			<img class="
				 picture__image lazyload" src="https://placehold.co/20x20" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
		</picture>
		<button type="button" class="figure__play-lbvideo" aria-haspopup="true" aria-controls="overlay" aria-expanded="false" data-js-item="overlay-handler-cta" data-content="{ &quot;youtube&quot;: {&quot;id&quot;: &quot;mM5_T-F1Yn4&quot;,&quot;format&quot;: &quot;4_3&quot;}, &quot;caption&quot;: {&quot;captionHeadline&quot;:&quot;Youtube Video Headline&quot;,&quot;captionContent&quot;:&quot;Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.&quot;} }">Lightbox öffnen</button>
	</div>
	<figcaption class="figure__caption">
		<div class="figure__caption-inner">
			<h3 class="figure__caption-headline">Caption Headline</h3>
			<p class="figure__caption-content">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
		</div>
	</figcaption>
</figure>

Default with picture

<figure class="c-figure--rte is-rte-embed is-left" data-css="c-figure" id="figure-content" data-js-module="overlay-handler">
	<div class="figure__wrapper">
		<picture class="c-picture--default
				 lazyload" data-css="c-picture">
			<!--[if IE 9]><audio><![endif]-->
			<source data-srcset="
				 https://placehold.co/400x400  400w  , 
				 https://placehold.co/800x800  800w  , 
				 https://placehold.co/1200x1200  1200w  , 
				 https://placehold.co/1600x1600  1600w  , 
				 https://placehold.co/2000x2000  2000w  , 
				 https://placehold.co/2400x2400  2400w  , 
				 https://placehold.co/2800x2800  2800w  , 
				 https://placehold.co/3200x3200  3200w  " />
			<!--[if IE 9]></audio><![endif]-->
			<img class="
				 picture__image lazyload" src="https://placehold.co/20x20" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
		</picture>
		<button type="button" class="c-cta--image-zoom" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "image": { "src": "https://placehold.co/2000x1000", "altText": "Some alt text"}, "caption": {"captionHeadline": "Caption Headline", "captionContent": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."}, "metainfo": {"items": [{"text": "© imageworks"}]} }'>
			Vergrößern
		</button>
	</div>
	<figcaption class="figure__caption">
		<div class="figure__caption-inner">
			<h3 class="figure__caption-headline">Caption Headline</h3>
			<p class="figure__caption-content">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
		</div>
	</figcaption>
</figure>

Picture and caption

<figure class="c-figure--caption" data-css="c-figure" id="figure-caption">
	<div class="figure__wrapper">
		<picture class="c-picture--default
				 lazyload" data-css="c-picture">
			<!--[if IE 9]><audio><![endif]-->
			<source data-srcset="
				 https://placehold.co/400x115  400w  , 
				 https://placehold.co/800x229  800w  , 
				 https://placehold.co/1200x343  1200w  , 
				 https://placehold.co/1600x458  1600w  , 
				 https://placehold.co/2000x572  2000w  , 
				 https://placehold.co/2400x686  2400w  , 
				 https://placehold.co/2800x800  2800w  , 
				 https://placehold.co/3200x915  3200w  " />
			<!--[if IE 9]></audio><![endif]-->
			<img class="
				 picture__image lazyload" src="https://placehold.co/40x10" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
		</picture>
	</div>
	<figcaption class="figure__caption">
		<div class="figure__caption-inner">
			<h3 class="figure__caption-headline">My custom picture with caption</h3>
			<p class="figure__caption-content">and custom content</p>
		</div>
	</figcaption>
</figure>

Audio and caption

<figure class="c-figure--audio" data-css="c-figure">
	<div class="figure__wrapper">
		<audio class="c-audio--default" data-css="c-audio" controls>
			<source src="https://cast.itunes.uni-muenchen.de/clips/qSq6se5sif/vod/audio_only.mp3" type="audio/mpeg">
		</audio>
	</div>
	<figcaption class="figure__caption">
		<div class="figure__caption-inner">
			<h3 class="figure__caption-headline">My custom audio with caption</h3>
			<p class="figure__caption-content">4:00 Min | 25.03.2018 | ©motionworks</p>
		</div>
	</figcaption>
</figure>

Video and caption

<figure class="c-figure--video" data-css="c-figure">
	<div class="figure__wrapper">
		<video class="c-video--default" data-css="c-video" poster="././media/video/big-buck-bunny_poster.jpg" controls buffer tabindex="0">
			<source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
			<source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type='video/webm; codecs="vp8, vorbis"' />
			<track src="" kind="" srclang="" label="" />
		</video>
	</div>
	<figcaption class="figure__caption">
		<div class="figure__caption-inner">
			<h3 class="figure__caption-headline">My custom video with caption</h3>
			<p class="figure__caption-content">4:00 Min | 25.03.2018 | ©motionworks</p>
		</div>
	</figcaption>
</figure>

Video embedded and caption

<figure class="c-figure--video" data-css="c-figure">
	<div class="figure__wrapper">
		<div class="c-video-embeded--default" data-css="c-video-embeded" data-js-module="video-embeded">
			<div class="video-embeded__container video-embeded__youtube">
				<div class="video-embeded__img">
					<picture class="c-picture--video-embeded-img
														" data-css="c-picture">
						<!--[if IE 9]><audio><![endif]-->
						<source srcset="
														 https://placehold.co/400x200  400w  , 
														 https://placehold.co/800x400  800w  , 
														 https://placehold.co/1200x600  1200w  , 
														 https://placehold.co/2400x1200  1600w  " sizes=" 
														  (min-width: 1440px) 1440px 
														  ,   100vw " />
						<!--[if IE 9]></audio><![endif]-->
						<img class="
														 picture__image" src="https://placehold.co/400x200" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
					</picture>
				</div>
				<div class="video-embeded__content-container">
					<div class="video-embeded__content">
						<p>Wenn Sie diesen eingebetteten Facebook-Post anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen. Für die Speicherung und Verarbeitung der Daten gilt die</p>
						<p>Für die Speicherung und Verarbeitung der Daten gilt die <a href="https://www.facebook.com/help/instagram/155833707900388" class="is-external" target="_blank">You-Tube-Datenschutzrichtlinie</a>.</p>
					</div>
					<div class="video-embeded__button">
						<button type="button" class="video-embeded__link" data-company="youtube" data-js-item="js-video-embeded-youtube">Ich habe die Datenschutzbestimmungen zur Kenntnis genommen und möchte eingebettete Inhalte von Facebook anzeigen</button>
						<!-- <a href="#" class="video-embeded__link" data-company="youtube" data-js-item="js-video-embeded-youtube">Ich habe die Datenschutzbestimmungen zur Kenntnis genommen und möchte eingebettete Inhalte von Facebook anzeigen</a> -->
					</div>
					<div style="clear: both;"></div>
				</div>
			</div>
			<div class="video-embeded_box video-embeded_16_9 video-embeded_company_youtube video-embeded__hidden" data-src="<iframe width='560' height='315' src='https://www.youtube-nocookie.com/embed/WUgvvPRH7Oc'' frameborder='0' allow='autoplay; fullscreen'
								allowfullscreen></iframe>" data-company="youtube">
			</div>
		</div>
	</div>
	<figcaption class="figure__caption">
		<div class="figure__caption-inner">
			<h3 class="figure__caption-headline">My custom video with caption</h3>
			<p class="figure__caption-content">4:00 Min | 25.03.2018 | ©motionworks</p>
		</div>
	</figcaption>
</figure>