DIV-EMBED (component )

src/app/shared/components/div-embed/templates

Demo Section

Each variation will be presented in the following section.

Default (Detailseite Deutsch)

Google Maps Detailseite Deutsch

Wenn Sie diese eingebettete Google Karte (Google Maps) anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.

Für die Dauer des Besuchs auf der Website (bis zum Schließen des Browsers) wird diese Auswahl in Form eines auf Ihrem Rechner abgelegten Cookies gespeichert.

Für die Speicherung und Verarbeitung der Daten gilt die Datenschutzrichtlinie von Google

Ich habe die Datenschutzbestimmungen von Google zur Kenntnis genommen und möchte alle einegbetteten Inhalte von Google Maps anzeigen
Unterüberschrift zur Karte

Hier dann erklärender Text zur Karte

Default (Detailseite Englisch)

Google Maps Detailseite Englisch

If you click to view this video your personal data will be transmitted to Vimeo and cookies may also be stored on your device. LMU has no influence over how any such data is transmitted or indeed over its further usage.

For the duration of your visit to the website (until you close your browser), this selection will be stored in the form of a cookie saved on your computer.

The following applies to the storage and processing of data: Google Privacy Policy

Ich habe die Datenschutzbestimmungen von Google zur Kenntnis genommen und möchte alle einegbetteten Inhalte von Google Maps anzeigen

Landingpage

Google Maps Landingpage Deutsch

Wenn Sie diese eingebettete Google Karte (Google Maps) anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.

Für die Dauer des Besuchs auf der Website (bis zum Schließen des Browsers) wird diese Auswahl in Form eines auf Ihrem Rechner abgelegten Cookies gespeichert.

Für die Speicherung und Verarbeitung der Daten gilt die Datenschutzrichtlinie von Google

Ich habe die Datenschutzbestimmungen von Google zur Kenntnis genommen und möchte alle einegbetteten Inhalte von Google Maps anzeigen
Bitte prüfen Sie den Embed-Code und stellen sie sicher, dass er vom richtigen Provider ist.
Unterüberschrift zur Karte

Hier dann erklärender Text zur Karte

BayernAtlas (Detailseite Deutsch)

bayernatlas Detailseite Deutsch

Wenn Sie diese eingebettete BayernAtlas Karte anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.

Für die Dauer des Besuchs auf der Website (bis zum Schließen des Browsers) wird diese Auswahl in Form eines auf Ihrem Rechner abgelegten Cookies gespeichert.

Für die Speicherung und Verarbeitung der Daten gilt die Datenschutzrichtlinie von BayernAtlas

Ich habe die Datenschutzbestimmungen von BayernAtlas zur Kenntnis genommen und möchte alle einegbetteten Inhalte von BayernAtlas anzeigen
Unterüberschrift zur Karte

Hier dann erklärender Text zur Karte

OpenStreetMap (Detailseite Deutsch)

OpenStreetMap Detailseite Deutsch

Wenn Sie diese eingebettete OpenStreetMap Karte anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.

Für die Dauer des Besuchs auf der Website (bis zum Schließen des Browsers) wird diese Auswahl in Form eines auf Ihrem Rechner abgelegten Cookies gespeichert.

Für die Speicherung und Verarbeitung der Daten gilt die Datenschutzrichtlinie von OpenStreetMap

Ich habe die Datenschutzbestimmungen von OpenStreetMap zur Kenntnis genommen und möchte alle einegbetteten Inhalte von OpenStreetMap anzeigen
Unterüberschrift zur Karte

Hier dann erklärender Text zur Karte

Readme

divEmbed (component)

Description

This blueprint is based on the blueprint of Veams.

Requirements

  • Veams#5.0.0

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/div-embed

Fields

div-embed.hbs

Settings

Parameter Type Default Description
settings.divEmbedClasses String '' Modifier classes for component, ‘is-rte-embed’ must be set for Detailpages
settings.divEmbedContextClass String 'default' Context class of component ‘default’ vor Detailpages, ‘lpage’ vor the Modul in a Landingpage
settings.divEmbedJsOptions Object null JavaScript options object which gets stringified
settings.divEmbedModuleContainerClass String '' Modifier classes for the emebd element, ‘div-embed__googlemaps-container’ for a google map embed solution
settings.divEmbedModuleInfoboxClass String '' Modifier classes for theDSGVO-Infobox, “is-googlemaps-dsgvoinfo” for a google map dsgvoinfo
settings.showCaption String not existend if the Attribute exist (“true”) a Caption area is shown

Content

Parameter Type Description
content.headline String Headline of the map
content.dsgvoinfo String 1.Sentence depending the DSGVO infos
content.dsgvoinfo2 String 2.Sentence depending the DSGVO infos
content.dsgvoinfo3 String 3.Sentence depending the DSGVO infos
content.dsgvoinfo4 String Link Text for the DSGVO-Link. In Combination with the URL in Parameter dsgvoinfolink
content.dsgvoinfolink String Link for the DSGVO-Link. In Combination with the Linktext in Parameter dsgvoinfo4
content.dsgvoconfirm String Text for the DSGVO Confirm Button
content.embedcode String Embed Code
content.captionHeadline String Sub-Headline for the map
content.captionContent String Sub-Content for the map
content.embedError String Errorinformation if the embed-Code is not correct

JavaScript Options

The module gives you the possibility to override default JS options:

Option Type Default Description

SASS

Variables

There are multiple variables which you can change:

Variable Value Description
$div-embed-my-custom-var 0px Please add a description!

Modifier Classes

There are modifier classes you can add to c-div-embed:

Modifier Description
is-modifier Please add a description!
is-googlemaps-dsgvoinfo View for a DSGVO-informationbox for Google Maps

Templates

div-embed.hbs

<div class="c-div-embed{{#if settings.divEmbedContextClass}}--{{settings.divEmbedContextClass}}{{else}}--default{{/if}}{{#if settings.divEmbedClasses}} {{settings.divEmbedClasses}}{{/if}}"
     data-css="c-div-embed"
     data-js-module="div-embed"{{#if settings.divEmbedJsOptions}}
     data-js-options='{{stringify settings.divEmbedJsOptions}}'{{/if}}>
{{#if content.headline}}<h2 class="div-embed__headline">{{content.headline}}</h2>{{/if}}
	<figure>
		<div class="div-embed__container {{#if settings.divEmbedModuleInfoboxClass}}{{settings.divEmbedModuleInfoboxClass}}{{/if}}">
			<div class="div-embed__content-container">
				<div class="div-embed__content">
					{{#if content.dsgvoinfo}}<p>{{content.dsgvoinfo}}</p>{{/if}}
					{{#if content.dsgvoinfo2}}<p>{{content.dsgvoinfo2}}</p>{{/if}}
					{{#if content.dsgvoinfo3}}<p>{{content.dsgvoinfo3}}{{/if}}{{#if content.dsgvoinfo4}} <a class="div-embed__content-link" href="{{#if content.dsgvoinfolink}}{{content.dsgvoinfolink}}{{else}}#{{/if}}" target="_blank" rel="noopener">{{content.dsgvoinfo4}}</a></p>{{/if}}
				</div>
				<div class="div-embed__button">
					<a class="div-embed__link" data-js-item="{{#if settings.divEmbedJSItemName}}{{settings.divEmbedJSItemName}}{{/if}}">{{#if content.dsgvoconfirm}}{{content.dsgvoconfirm}}{{/if}}</a>
				</div>
				<div class="div-embed__clear"></div>
			</div>
		</div>

		<div class="div-embed__hidden {{#if settings.divEmbedModuleContainerClass}}{{settings.divEmbedModuleContainerClass}}{{/if}}" data-src="{{#if content.embedcode}}{{content.embedcode}}{{/if}}"></div>
		{{#if content.embedError}}
		<div class="div-embed__embederror">{{content.embedError}}</div>
		{{/if}}
		{{#if settings.showCaption}}
		<figcaption class="div-embed__caption">
			<div class="div-embed__caption-inner">
				{{#if content.captionHeadline}}
					<div class="div-embed__caption-headline">{{content.captionHeadline}}</div>
				{{/if}}
				{{#if content.captionContent}}
					<p class="div-embed__caption-content">{{content.captionContent}}</p>
				{{/if}}
			</div>
		</figcaption>
		{{/if}}
	</figure>
</div>

Data File

div-embed.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default (Detailseite Deutsch)"
			},
			"settings": {
				"divEmbedContextClass": "default",
				"divEmbedClasses": "",
				"divEmbedModuleContainerClass": "div-embed__googlemaps-container",
				"divEmbedModuleInfoboxClass": "is-googlemaps-dsgvoinfo",
				"divEmbedJsOptions": {},
				"divEmbedJSItemName":"js-div-embed-googlemaps",
				"showCaption": "true"
			},
			"content": {
				"headline": "Google Maps Detailseite Deutsch",
				"dsgvoinfo": "Wenn Sie diese eingebettete Google Karte (Google Maps) anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.",
				"dsgvoinfo2": "Für die Dauer des Besuchs auf der Website (bis zum Schließen des Browsers) wird diese Auswahl in Form eines auf Ihrem Rechner abgelegten Cookies gespeichert.",
				"dsgvoinfo3": "Für die Speicherung und Verarbeitung der Daten gilt die",
				"dsgvoinfo4": "Datenschutzrichtlinie von Google",
				"dsgvoinfolink": "https://policies.google.com/privacy?hl=de",
				"dsgvoconfirm": "Ich habe die Datenschutzbestimmungen von Google zur Kenntnis genommen und möchte alle einegbetteten Inhalte von Google Maps anzeigen",
				"embedcode": "<iframe height='480' width='640' src='https:\/\/www.google.com\/maps\/d\/embed?mid=1z9AE5WxC4SNj9u8HtyWUuWOkFcn17cvH' style='border:none;overflow:hidden' scrolling='no' frameborder='0' allowTransparency='true' allow='encrypted-media'></iframe>",
				"captionHeadline": "Unterüberschrift zur Karte",
				"captionContent": "Hier dann erklärender Text zur Karte"
			}
		},
		"defaultEn": {
			"docs": {
				"variationName": "Default (Detailseite Englisch)"
			},
			"settings": {
				"divEmbedContextClass": "default",
				"divEmbedClasses": "",
				"divEmbedModuleContainerClass": "div-embed__googlemaps-container",
				"divEmbedModuleInfoboxClass": "is-googlemaps-dsgvoinfo",
				"divEmbedJsOptions": {},
				"divEmbedJSItemName":"js-div-embed-googlemaps"
			},
			"content": {
				"headline": "Google Maps Detailseite Englisch",
				"dsgvoinfo": "If you click to view this video your personal data will be transmitted to Vimeo and cookies may also be stored on your device. LMU has no influence over how any such data is transmitted or indeed over its further usage.",
				"dsgvoinfo2": "For the duration of your visit to the website (until you close your browser), this selection will be stored in the form of a cookie saved on your computer.",
				"dsgvoinfo3": "The following applies to the storage and processing of data:",
				"dsgvoinfo4": "Google Privacy Policy",
				"dsgvoinfolink": "https://policies.google.com/privacy?hl=de",
				"dsgvoconfirm": "Ich habe die Datenschutzbestimmungen von Google zur Kenntnis genommen und möchte alle einegbetteten Inhalte von Google Maps anzeigen",
				"embedcode": "<iframe height='480' width='640' src='https:\/\/www.google.com\/maps\/d\/embed?mid=1z9AE5WxC4SNj9u8HtyWUuWOkFcn17cvH' style='border:none;overflow:hidden' scrolling='no' frameborder='0' allowTransparency='true' allow='encrypted-media'></iframe>"
			}
		},
		"lpage": {
			"docs": {
				"variationName": "Landingpage"
			},
			"settings": {
				"divEmbedContextClass": "lpage",
				"divEmbedClasses": "",
				"divEmbedModuleContainerClass": "div-embed__googlemaps-container",
				"divEmbedModuleInfoboxClass": "is-googlemaps-dsgvoinfo",
				"divEmbedJsOptions": {},
				"divEmbedJSItemName":"js-div-embed-googlemaps",
				"showCaption": "true"
			},
			"content": {
				"headline": "Google Maps Landingpage Deutsch",
				"dsgvoinfo": "Wenn Sie diese eingebettete Google Karte (Google Maps) anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.",
				"dsgvoinfo2": "Für die Dauer des Besuchs auf der Website (bis zum Schließen des Browsers) wird diese Auswahl in Form eines auf Ihrem Rechner abgelegten Cookies gespeichert.",
				"dsgvoinfo3": "Für die Speicherung und Verarbeitung der Daten gilt die",
				"dsgvoinfo4": "Datenschutzrichtlinie von Google",
				"dsgvoinfolink": "https://policies.google.com/privacy?hl=de",
				"dsgvoconfirm": "Ich habe die Datenschutzbestimmungen von Google zur Kenntnis genommen und möchte alle einegbetteten Inhalte von Google Maps anzeigen",
				"embedcode": "<iframe height='480' width='640' src='https:\/\/www.google.com\/maps\/d\/embed?mid=1z9AE5WxC4SNj9u8HtyWUuWOkFcn17cvH' style='border:none;overflow:hidden' scrolling='no' frameborder='0' allowTransparency='true' allow='encrypted-media'></iframe>",
				"captionHeadline": "Unterüberschrift zur Karte",
				"captionContent": "Hier dann erklärender Text zur Karte",
				"embedError": "Bitte prüfen Sie den Embed-Code und stellen sie sicher, dass er vom richtigen Provider ist."
			}
		},
		"bayernatlas": {
			"docs": {
				"variationName": "BayernAtlas (Detailseite Deutsch)"
			},
			"settings": {
				"divEmbedContextClass": "default",
				"divEmbedClasses": "",
				"divEmbedModuleContainerClass": "div-embed__bayernatlas-container",
				"divEmbedModuleInfoboxClass": "is-bayernatlas-dsgvoinfo",
				"divEmbedJsOptions": {},
				"divEmbedJSItemName":"js-div-embed-bayernatlas",
				"showCaption": "true"
			},
			"content": {
				"headline": "bayernatlas Detailseite Deutsch",
				"dsgvoinfo": "Wenn Sie diese eingebettete BayernAtlas Karte anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.",
				"dsgvoinfo2": "Für die Dauer des Besuchs auf der Website (bis zum Schließen des Browsers) wird diese Auswahl in Form eines auf Ihrem Rechner abgelegten Cookies gespeichert.",
				"dsgvoinfo3": "Für die Speicherung und Verarbeitung der Daten gilt die",
				"dsgvoinfo4": "Datenschutzrichtlinie von BayernAtlas",
				"dsgvoinfolink": "https://geoportal.bayern.de/geoportalbayern/seiten/datenschutz",
				"dsgvoconfirm": "Ich habe die Datenschutzbestimmungen von BayernAtlas zur Kenntnis genommen und möchte alle einegbetteten Inhalte von BayernAtlas anzeigen",
				"embedcode": "<iframe src='https:\/\/atlas.bayern.de\/embed.html?c=692103%2C5336970&z=17&r=0&l=atkis&crh=true%2C1289693.268305%2C6133002.258346&mid=2&ec_map_activation=true&ec_link_to_app=true' width='100%' height='600px' loading='lazy' frameborder='0' style='border:0' role='application'></iframe>",
				"captionHeadline": "Unterüberschrift zur Karte",
				"captionContent": "Hier dann erklärender Text zur Karte"
			}
		},
		"openstreetmap": {
			"docs": {
				"variationName": "OpenStreetMap (Detailseite Deutsch)"
			},
			"settings": {
				"divEmbedContextClass": "default",
				"divEmbedClasses": "",
				"divEmbedModuleContainerClass": "div-embed__openstreetmap-container",
				"divEmbedModuleInfoboxClass": "is-openstreetmap-dsgvoinfo",
				"divEmbedJsOptions": {},
				"divEmbedJSItemName":"js-div-embed-openstreetmap",
				"showCaption": "true"
			},
			"content": {
				"headline": "OpenStreetMap Detailseite Deutsch",
				"dsgvoinfo": "Wenn Sie diese eingebettete OpenStreetMap Karte anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.",
				"dsgvoinfo2": "Für die Dauer des Besuchs auf der Website (bis zum Schließen des Browsers) wird diese Auswahl in Form eines auf Ihrem Rechner abgelegten Cookies gespeichert.",
				"dsgvoinfo3": "Für die Speicherung und Verarbeitung der Daten gilt die",
				"dsgvoinfo4": "Datenschutzrichtlinie von OpenStreetMap",
				"dsgvoinfolink": "https://osmfoundation.org/wiki/Terms_of_Use",
				"dsgvoconfirm": "Ich habe die Datenschutzbestimmungen von OpenStreetMap zur Kenntnis genommen und möchte alle einegbetteten Inhalte von OpenStreetMap anzeigen",
				"embedcode": "<iframe width='425' height='350' src='https:\/\/www.openstreetmap.org\/export\/embed?bbox=11.584152281284334%2C48.15613424358236%2C11.58686399459839%2C48.157563882125814&amp;layer=mapnik&amp;marker=48.15684906783369%2C11.58550813794136' style='border: 1px solid black'></iframe><br/><small><a href='https:\/\/www.openstreetmap.org\/?mlat=48.156849&amp;mlon=11.585508#map=19/48.156849/11.585508'>Größere Karte anzeigen</a></small>",
				"captionHeadline": "Unterüberschrift zur Karte",
				"captionContent": "Hier dann erklärender Text zur Karte"
			}
		}

	}
}

Styles

div-embed.scss

/* ===================================================
component: social-embed
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-div-embed"] {
	width: 100%;
	position: relative;
	display: inline-block;


	.div-embed__content-link {
		text-decoration: none;
		color: $color-green-hc-dark;
		text-decoration: none;
		transition: color $animation-duration-std/2 $animation-easing-std;

		@include print() {
			text-decoration: underline !important;
		}

		&:focus {
			outline: none;
		}

		&:hover,
		&:focus {
			color: $color-dark;
			text-decoration: none;

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

				transform: translateX(5px);
			}
		}

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

			position: relative;
			display: inline-block;
			top: 1px;
			margin-right: 10px;
			vertical-align: unset;
			transition: transform $animation-duration-std $animation-easing-std;

			@include print() {
				display: none !important;
			}
		}

		/*
		MODIFIERS
		----------------------- */
		&.a11y-focus-key {
			@include a11y-focus-key();
		}

		&.is-external {
			color: $color-green-hc-dark;
			transition: color $animation-duration-std/3 $animation-easing-std;
			display: inline-block;

			&:focus {
				outline: none;
			}

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

				&::before {
					@include sprites-icon-externalarrow-black();
				}
			}

			&.a11y-focus-key {
				@include a11y-focus-key();
			}

			&::before {
				@include pseudo();
				@include sprites-icon-externalarrow-green100();

				position: relative;
				display: inline-block;
				top: 1px;
				margin-right: 10px;
				vertical-align: unset;
			}
		}

		&.is-internal {

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

			&.a11y-focus-key {
				@include a11y-focus-key();
			}
		}
	}

	.div-embed__headline {
		@include headline-h2-styles();
	}

	.div-embed__hidden {
		display: none;
	}

	.div-embed__container {
		position: relative;
		width: 100%;
		background-color: $color-light;
		padding: 5%;

		@include bp($bp-tablet-l) {
			padding: 8% 15%;
		}

		@include print() {
			padding: 0;
		}

		&.is-googlemaps-dsgvoinfo, &.is-bayernatlas-dsgvoinfo, &.is-openstreetmap-dsgvoinfo  {
			background-image: url('../media/footer/footer-map.png');
		}

	}

	.div-embed__content-container {
		position: relative;
		border: 1px solid $color-gray-border;
		padding: 15px;
		background-color: $color-white;
	}

	.div-embed__content {
		color: $color-dark;
		font-family: $font-italic;
		font-style: italic;
		padding-bottom: 20px;
		font-size: 1.6rem;
		line-height: (32/20);

		@include bp($bp-tablet-p) {
			font-size: 2rem;
		}

		@include bp($bp-desktop-l) {
		}
	}

	.div-embed__button {
		position: relative;
		float: left;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: $color-green;
		border: 1px solid $color-green;
		transition: background-color $animation-duration-std $animation-easing-std;

		@include print() {
			display: none;
		}

		&:hover {
			background-color: $color-white;

			.div-embed__link {
				color: $color-green;

				&::before {
					@include sprites-icon-arrow-green100();
					transform: translateX(5px);
				}

				&.is-external {

					&::before {
						@include sprites-icon-externalarrow-green100();
					}
				}
			}
		}



		.div-embed__link {
			cursor: pointer;
			padding: 10px 30px 10px 50px;
			color: $color-white;
			text-decoration: none;
			font-size: 1.5rem;
			line-height: (24/15);
			letter-spacing: .028rem;
			font-family: $font-bold;
			transition: color $animation-duration-std $animation-easing-std;

			@include bp($bp-tablet-p) {
				padding: 20px 30px 20px 50px;
				font-size: 1.6rem;
				letter-spacing: .03rem;
			}

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

				left: 20px;
				top: calc(50% - 7px);
				transition: transform $animation-duration-std $animation-easing-std;
			}

			&.is-external {

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

			&.a11y-focus-key {
				outline-offset: -2px;
			}
		}
	}

	.div-embed__googlemaps-container, .div-embed__bayernatlas-container, .div-embed__openstreetmap-container {
		position: relative;
		overflow: hidden;
		width: 100%;
		padding-bottom: 75%; /* 4:3 Aspect Ratio */
		height: 0;

		@include bp($bp-tablet-p) {
			padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
		}

		iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}

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

	.div-embed__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;
	}

	.div-embed__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;
	}

	.div-embed__clear{
		clear: both;
	}

	.div-embed__embederror {
		color: $color-red-light;
		padding: 20px 0px;
		font-size: 1.6rem;
		line-height: (32/20);
		font-family: $font-bold;
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-div-embed--default {
	margin-bottom: 60px;

	&.is-googlemaps-dsgvoinfo, &.is-bayernatlas-dsgvoinfo, &.is-openstreetmap-dsgvoinfo {
		@include rte-dimensions();
	}

}


/* ---------------------------------------------------
Context: lpage
--------------------------------------------------- */
.c-div-embed--lpage {
	clear: both;
	display: inline-block;
	width: 100%;
	margin: 0 auto 60px;

	@include bp($bp-mobile-p) {
		margin-bottom: 80px;
	}

	@include bp($bp-tablet-p) {
		margin-bottom: 100px;
		margin-top: 0;
	}

	@include bp(1920px) {
		margin-bottom: 120px;
	}

	.div-embed__headline {
		@include bp($bp-tablet-p) {
			@include grid-column-width(12);
			@include grid-push-h(0);
		}
	}
}

Scripts

div-embed.js

/**
 * Description of DivEmbed.
 * Class properties and decorators are supported.
 *
 * @module DivEmbed
 * @version v1.0.0
 *
 * @author your_name
 */

// Imports
import $ from 'jquery';
import Component from '@veams/component';

class DivEmbed extends Component {
	/**
	 * Class Properties
	 */
	$el = $(this.el);

	/**
	 * Constructor for our class
	 *
	 * @see module.js
	 *
	 * @param {Object} obj - Object which is passed to our class
	 * @param {Object} obj.el - element which will be saved in this.el
	 * @param {Object} obj.options - options which will be passed in as JSON object
	 */
	constructor(obj) {
		let options = {
			selectors: {
				jsShowGoogleMaps: '[data-js-item="js-div-embed-googlemaps"]',
				jsShowBayernAtlas: '[data-js-item="js-div-embed-bayernatlas"]',
				jsShowOpenStreetMap: '[data-js-item="js-div-embed-openstreetmap"]'
			},
			classes: {}
		};

		super(obj, options);
	}

	didMount() {
		console.log('Component DivEmbed mounted!');

		var cookie = document.cookie;

		if (cookie.includes('googlemaps=true')) {
			$('.is-googlemaps-dsgvoinfo').addClass('div-embed__hidden');
			var googlemaps = document.getElementsByClassName('div-embed__googlemaps-container');
			for (var i = 0; i < googlemaps.length; i++) {
				var src = googlemaps[i].dataset.src;
				src = src.replace(/\\/g, '');
				if(src.includes("iframe") && src.includes("src='https://www.google.com/maps/")) {
					googlemaps[i].innerHTML = src;
				}
			}
			setTimeout(function() {
				$('.div-embed__googlemaps-container').removeClass('div-embed__hidden');
			}, 400);
		}

		if (cookie.includes('bayernatlas=true')) {
			$('.is-bayernatlas-dsgvoinfo').addClass('div-embed__hidden');
			var bayernatlas = document.getElementsByClassName('div-embed__bayernatlas-container');
			for (var i = 0; i < bayernatlas.length; i++) {
				var src = bayernatlas[i].dataset.src;
				src = src.replace(/\\/g, '');
				if(src.includes("iframe") && src.includes("src='https://atlas.bayern.de/embed.html")) {
					bayernatlas[i].innerHTML = src;
				}
			}
			setTimeout(function() {
				$('.div-embed__bayernatlas-container').removeClass('div-embed__hidden');
			}, 400);
		}

		if (cookie.includes('openstreetmap=true')) {
			$('.is-openstreetmap-dsgvoinfo').addClass('div-embed__hidden');
			var openstreetmap = document.getElementsByClassName('div-embed__openstreetmap-container');
			for (var i = 0; i < openstreetmap.length; i++) {
				var src = openstreetmap[i].dataset.src;
				src = src.replace(/\\/g, '');
				if(src.includes("iframe") && src.includes("src='https://www.openstreetmap.org/export/embed")) {
					openstreetmap[i].innerHTML = src;
				}
			}
			$('.div-embed__openstreetmap-container').removeClass('div-embed__hidden');
		}
	}

	/**
	 * Render class
	 */
	render() {
		return this;
	}

	// Local Handlers
	get events() {
		return {
			'{{context.EVENTS.click}} {{this.options.selectors.jsShowGoogleMaps}}':
				'jsShowGoogleMapsClick',
			'{{context.EVENTS.click}} {{this.options.selectors.jsShowBayernAtlas}}':
				'jsShowBayernAtlasClick',
			'{{context.EVENTS.click}} {{this.options.selectors.jsShowOpenStreetMap}}':
				'jsShowOpenStreetMapClick'
		};
	}

	jsShowGoogleMapsClick(e) {
		e.preventDefault();
		$('.is-googlemaps-dsgvoinfo').addClass('div-embed__hidden');
		var googlemaps = document.getElementsByClassName('div-embed__googlemaps-container');
		for (var i = 0; i < googlemaps.length; i++) {
			var src = googlemaps[i].dataset.src;
			src = src.replace(/\\/g, '');
			if(src.includes("iframe") && src.includes("src='https://www.google.com/maps/")) {
				googlemaps[i].innerHTML = src;
			} else {
				googlemaps[i].innerHTML = "";
			}
		}
		setTimeout(function() {
			$('.div-embed__googlemaps-container').removeClass('div-embed__hidden');
		}, 400);
		document.cookie = 'googlemaps=true;';
		return true;
	}

	jsShowBayernAtlasClick(e) {
		e.preventDefault();
		$('.is-bayernatlas-dsgvoinfo').addClass('div-embed__hidden');
		var bayernatlas = document.getElementsByClassName('div-embed__bayernatlas-container');
		for (var i = 0; i < bayernatlas.length; i++) {
			var src = bayernatlas[i].dataset.src;
			src = src.replace(/\\/g, '');
			if(src.includes("iframe") && src.includes("src='https://atlas.bayern.de/embed.html")) {
				bayernatlas[i].innerHTML = src;
			} else {
				bayernatlas[i].innerHTML = "";
			}
		}

		setTimeout(function() {
			$('.div-embed__bayernatlas-container').removeClass('div-embed__hidden');
		}, 400);

		document.cookie = 'bayernatlas=true;';
		return true;
	}

	jsShowOpenStreetMapClick(e) {
		e.preventDefault();
		$('.is-openstreetmap-dsgvoinfo').addClass('div-embed__hidden');
		var openstreetmap = document.getElementsByClassName('div-embed__openstreetmap-container');
		for (var i = 0; i < openstreetmap.length; i++) {
			var src = openstreetmap[i].dataset.src;
			src = src.replace(/\\/g, '');
			if(src.includes("iframe") && src.includes("src='https://www.openstreetmap.org/export/embed")) {
				openstreetmap[i].innerHTML = src;
			} else {
				openstreetmap[i].innerHTML = "";
			}
		}
		$('.div-embed__openstreetmap-container').removeClass('div-embed__hidden');

		document.cookie = 'openstreetmap=true;';
		return true;
	}
}

export default DivEmbed;

HTML Output

Default (Detailseite Deutsch)

<div class="c-div-embed--default" data-css="c-div-embed" data-js-module="div-embed" data-js-options='{}'>
	<h2 class="div-embed__headline">Google Maps Detailseite Deutsch</h2>
	<figure>
		<div class="div-embed__container is-googlemaps-dsgvoinfo">
			<div class="div-embed__content-container">
				<div class="div-embed__content">
					<p>Wenn Sie diese eingebettete Google Karte (Google Maps) anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.</p>
					<p>Für die Dauer des Besuchs auf der Website (bis zum Schließen des Browsers) wird diese Auswahl in Form eines auf Ihrem Rechner abgelegten Cookies gespeichert.</p>
					<p>Für die Speicherung und Verarbeitung der Daten gilt die <a class="div-embed__content-link" href="https://policies.google.com/privacy?hl&#x3D;de" target="_blank" rel="noopener">Datenschutzrichtlinie von Google</a></p>
				</div>
				<div class="div-embed__button">
					<a class="div-embed__link" data-js-item="js-div-embed-googlemaps">Ich habe die Datenschutzbestimmungen von Google zur Kenntnis genommen und möchte alle einegbetteten Inhalte von Google Maps anzeigen</a>
				</div>
				<div class="div-embed__clear"></div>
			</div>
		</div>
		<div class="div-embed__hidden div-embed__googlemaps-container" data-src="&lt;iframe height&#x3D;&#x27;480&#x27; width&#x3D;&#x27;640&#x27; src&#x3D;&#x27;https://www.google.com/maps/d/embed?mid&#x3D;1z9AE5WxC4SNj9u8HtyWUuWOkFcn17cvH&#x27; style&#x3D;&#x27;border:none;overflow:hidden&#x27; scrolling&#x3D;&#x27;no&#x27; frameborder&#x3D;&#x27;0&#x27; allowTransparency&#x3D;&#x27;true&#x27; allow&#x3D;&#x27;encrypted-media&#x27;&gt;&lt;/iframe&gt;"></div>
		<figcaption class="div-embed__caption">
			<div class="div-embed__caption-inner">
				<div class="div-embed__caption-headline">Unterüberschrift zur Karte</div>
				<p class="div-embed__caption-content">Hier dann erklärender Text zur Karte</p>
			</div>
		</figcaption>
	</figure>
</div>

Default (Detailseite Englisch)

<div class="c-div-embed--default" data-css="c-div-embed" data-js-module="div-embed" data-js-options='{}'>
	<h2 class="div-embed__headline">Google Maps Detailseite Englisch</h2>
	<figure>
		<div class="div-embed__container is-googlemaps-dsgvoinfo">
			<div class="div-embed__content-container">
				<div class="div-embed__content">
					<p>If you click to view this video your personal data will be transmitted to Vimeo and cookies may also be stored on your device. LMU has no influence over how any such data is transmitted or indeed over its further usage.</p>
					<p>For the duration of your visit to the website (until you close your browser), this selection will be stored in the form of a cookie saved on your computer.</p>
					<p>The following applies to the storage and processing of data: <a class="div-embed__content-link" href="https://policies.google.com/privacy?hl&#x3D;de" target="_blank" rel="noopener">Google Privacy Policy</a></p>
				</div>
				<div class="div-embed__button">
					<a class="div-embed__link" data-js-item="js-div-embed-googlemaps">Ich habe die Datenschutzbestimmungen von Google zur Kenntnis genommen und möchte alle einegbetteten Inhalte von Google Maps anzeigen</a>
				</div>
				<div class="div-embed__clear"></div>
			</div>
		</div>
		<div class="div-embed__hidden div-embed__googlemaps-container" data-src="&lt;iframe height&#x3D;&#x27;480&#x27; width&#x3D;&#x27;640&#x27; src&#x3D;&#x27;https://www.google.com/maps/d/embed?mid&#x3D;1z9AE5WxC4SNj9u8HtyWUuWOkFcn17cvH&#x27; style&#x3D;&#x27;border:none;overflow:hidden&#x27; scrolling&#x3D;&#x27;no&#x27; frameborder&#x3D;&#x27;0&#x27; allowTransparency&#x3D;&#x27;true&#x27; allow&#x3D;&#x27;encrypted-media&#x27;&gt;&lt;/iframe&gt;"></div>
	</figure>
</div>

Landingpage

<div class="c-div-embed--lpage" data-css="c-div-embed" data-js-module="div-embed" data-js-options='{}'>
	<h2 class="div-embed__headline">Google Maps Landingpage Deutsch</h2>
	<figure>
		<div class="div-embed__container is-googlemaps-dsgvoinfo">
			<div class="div-embed__content-container">
				<div class="div-embed__content">
					<p>Wenn Sie diese eingebettete Google Karte (Google Maps) anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.</p>
					<p>Für die Dauer des Besuchs auf der Website (bis zum Schließen des Browsers) wird diese Auswahl in Form eines auf Ihrem Rechner abgelegten Cookies gespeichert.</p>
					<p>Für die Speicherung und Verarbeitung der Daten gilt die <a class="div-embed__content-link" href="https://policies.google.com/privacy?hl&#x3D;de" target="_blank" rel="noopener">Datenschutzrichtlinie von Google</a></p>
				</div>
				<div class="div-embed__button">
					<a class="div-embed__link" data-js-item="js-div-embed-googlemaps">Ich habe die Datenschutzbestimmungen von Google zur Kenntnis genommen und möchte alle einegbetteten Inhalte von Google Maps anzeigen</a>
				</div>
				<div class="div-embed__clear"></div>
			</div>
		</div>
		<div class="div-embed__hidden div-embed__googlemaps-container" data-src="&lt;iframe height&#x3D;&#x27;480&#x27; width&#x3D;&#x27;640&#x27; src&#x3D;&#x27;https://www.google.com/maps/d/embed?mid&#x3D;1z9AE5WxC4SNj9u8HtyWUuWOkFcn17cvH&#x27; style&#x3D;&#x27;border:none;overflow:hidden&#x27; scrolling&#x3D;&#x27;no&#x27; frameborder&#x3D;&#x27;0&#x27; allowTransparency&#x3D;&#x27;true&#x27; allow&#x3D;&#x27;encrypted-media&#x27;&gt;&lt;/iframe&gt;"></div>
		<div class="div-embed__embederror">Bitte prüfen Sie den Embed-Code und stellen sie sicher, dass er vom richtigen Provider ist.</div>
		<figcaption class="div-embed__caption">
			<div class="div-embed__caption-inner">
				<div class="div-embed__caption-headline">Unterüberschrift zur Karte</div>
				<p class="div-embed__caption-content">Hier dann erklärender Text zur Karte</p>
			</div>
		</figcaption>
	</figure>
</div>

BayernAtlas (Detailseite Deutsch)

<div class="c-div-embed--default" data-css="c-div-embed" data-js-module="div-embed" data-js-options='{}'>
	<h2 class="div-embed__headline">bayernatlas Detailseite Deutsch</h2>
	<figure>
		<div class="div-embed__container is-bayernatlas-dsgvoinfo">
			<div class="div-embed__content-container">
				<div class="div-embed__content">
					<p>Wenn Sie diese eingebettete BayernAtlas Karte anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.</p>
					<p>Für die Dauer des Besuchs auf der Website (bis zum Schließen des Browsers) wird diese Auswahl in Form eines auf Ihrem Rechner abgelegten Cookies gespeichert.</p>
					<p>Für die Speicherung und Verarbeitung der Daten gilt die <a class="div-embed__content-link" href="https://geoportal.bayern.de/geoportalbayern/seiten/datenschutz" target="_blank" rel="noopener">Datenschutzrichtlinie von BayernAtlas</a></p>
				</div>
				<div class="div-embed__button">
					<a class="div-embed__link" data-js-item="js-div-embed-bayernatlas">Ich habe die Datenschutzbestimmungen von BayernAtlas zur Kenntnis genommen und möchte alle einegbetteten Inhalte von BayernAtlas anzeigen</a>
				</div>
				<div class="div-embed__clear"></div>
			</div>
		</div>
		<div class="div-embed__hidden div-embed__bayernatlas-container" data-src="&lt;iframe src&#x3D;&#x27;https://atlas.bayern.de/embed.html?c&#x3D;692103%2C5336970&amp;z&#x3D;17&amp;r&#x3D;0&amp;l&#x3D;atkis&amp;crh&#x3D;true%2C1289693.268305%2C6133002.258346&amp;mid&#x3D;2&amp;ec_map_activation&#x3D;true&amp;ec_link_to_app&#x3D;true&#x27; width&#x3D;&#x27;100%&#x27; height&#x3D;&#x27;600px&#x27; loading&#x3D;&#x27;lazy&#x27; frameborder&#x3D;&#x27;0&#x27; style&#x3D;&#x27;border:0&#x27; role&#x3D;&#x27;application&#x27;&gt;&lt;/iframe&gt;"></div>
		<figcaption class="div-embed__caption">
			<div class="div-embed__caption-inner">
				<div class="div-embed__caption-headline">Unterüberschrift zur Karte</div>
				<p class="div-embed__caption-content">Hier dann erklärender Text zur Karte</p>
			</div>
		</figcaption>
	</figure>
</div>

OpenStreetMap (Detailseite Deutsch)

<div class="c-div-embed--default" data-css="c-div-embed" data-js-module="div-embed" data-js-options='{}'>
	<h2 class="div-embed__headline">OpenStreetMap Detailseite Deutsch</h2>
	<figure>
		<div class="div-embed__container is-openstreetmap-dsgvoinfo">
			<div class="div-embed__content-container">
				<div class="div-embed__content">
					<p>Wenn Sie diese eingebettete OpenStreetMap Karte anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.</p>
					<p>Für die Dauer des Besuchs auf der Website (bis zum Schließen des Browsers) wird diese Auswahl in Form eines auf Ihrem Rechner abgelegten Cookies gespeichert.</p>
					<p>Für die Speicherung und Verarbeitung der Daten gilt die <a class="div-embed__content-link" href="https://osmfoundation.org/wiki/Terms_of_Use" target="_blank" rel="noopener">Datenschutzrichtlinie von OpenStreetMap</a></p>
				</div>
				<div class="div-embed__button">
					<a class="div-embed__link" data-js-item="js-div-embed-openstreetmap">Ich habe die Datenschutzbestimmungen von OpenStreetMap zur Kenntnis genommen und möchte alle einegbetteten Inhalte von OpenStreetMap anzeigen</a>
				</div>
				<div class="div-embed__clear"></div>
			</div>
		</div>
		<div class="div-embed__hidden div-embed__openstreetmap-container" data-src="&lt;iframe width&#x3D;&#x27;425&#x27; height&#x3D;&#x27;350&#x27; src&#x3D;&#x27;https://www.openstreetmap.org/export/embed?bbox&#x3D;11.584152281284334%2C48.15613424358236%2C11.58686399459839%2C48.157563882125814&amp;amp;layer&#x3D;mapnik&amp;amp;marker&#x3D;48.15684906783369%2C11.58550813794136&#x27; style&#x3D;&#x27;border: 1px solid black&#x27;&gt;&lt;/iframe&gt;&lt;br/&gt;&lt;small&gt;&lt;a href&#x3D;&#x27;https://www.openstreetmap.org/?mlat&#x3D;48.156849&amp;amp;mlon&#x3D;11.585508#map&#x3D;19/48.156849/11.585508&#x27;&gt;Größere Karte anzeigen&lt;/a&gt;&lt;/small&gt;"></div>
		<figcaption class="div-embed__caption">
			<div class="div-embed__caption-inner">
				<div class="div-embed__caption-headline">Unterüberschrift zur Karte</div>
				<p class="div-embed__caption-content">Hier dann erklärender Text zur Karte</p>
			</div>
		</figcaption>
	</figure>
</div>

Wonach suchst du?

Datenschutzhinweis mit Link