VIDEO-EMBEDED (component )

src/app/shared/components/video-embeded/templates

Demo Section

Each variation will be presented in the following section.

Variante 16:9

Alternative text that describes the image

Wenn Sie dieses eingebettete Video anzeigen, werden personenbezogene Daten an den Betreiber des Portals übertragen.

Für die Speicherung und Verarbeitung der Daten gilt die You-Tube-Datenschutzrichtlinie.

Variante 4:3

Alternative text that describes the image

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

Für die Speicherung und Verarbeitung der Daten gilt die You-Tube-Datenschutzrichtlinie.

Variante 16:9 (Vimeo)

Alternative text that describes the image

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

Für die Speicherung und Verarbeitung der Daten gilt die Vimeo-Datenschutzrichtlinie.

Variante (LRZ)

Readme

videoEmbeded (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/video-embeded

Fields

video-embeded.hbs

Settings

Parameter Type Default Description
settings.videoEmbededClasses String '' Modifier classes for component
settings.videoEmbededContextClass String 'default' Context class of component

Content

Parameter Type Description
content.videoEmbededField String Please add a description!

SASS

Variables

There are multiple variables which you can change:

Variable Value Description
$video-embeded-my-custom-var 0px Please add a description!

Modifier Classes

There are modifier classes you can add to c-video-embeded:

Modifier Description
is-modifier Please add a description!

Templates

video-embeded.hbs

<div class="c-video-embeded{{#if settings.videoEmbededContextClass}}--{{settings.videoEmbededContextClass}}{{else}}--default{{/if}}"
 data-css="c-video-embeded" data-js-module="video-embeded">

	{{#if content.videoUrl}}
		{{#if content.videoId}}
			{{#if content.videoCompany}}
				<div class="video-embeded__container video-embeded__{{content.videoCompany}}" >
					{{#if content.picture}}
						<div class="video-embeded__img">
							{{#with content.picture}}
								{{> picture }}
							{{/with}}
						</div>
					{{/if}}
					<div class="video-embeded__content-container">

						<div class="video-embeded__content">
						<p>{{content.videoDataSecurityText}}</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">{{content.videoDataSecurityLinkText}}</a>.</p>
						</div>
						<div class="video-embeded__button">
						<button type="button" class="video-embeded__link" {{#if content.videoCompany}}data-company="{{content.videoCompany}}"{{/if}} data-js-item="js-video-embeded-{{content.videoCompany}}">{{content.videoDataSecurityButton}}</button>
						<!-- <a href="#" class="video-embeded__link" {{#if content.videoCompany}}data-company="{{content.videoCompany}}"{{/if}} data-js-item="js-video-embeded-{{content.videoCompany}}">{{content.videoDataSecurityButton}}</a> -->
						</div>
						<div style="clear: both;"></div>
					</div>
				</div>
			{{/if}}
			<div class="video-embeded_box{{#if settings.videoEmbededClasses}} {{settings.videoEmbededClasses}}{{/if}}{{#if content.videoCompany}} video-embeded_company_{{content.videoCompany}} video-embeded__hidden{{/if}}" {{#if content.videoCompany}}data-src="<iframe width='560' height='315' src='{{content.videoUrl}}{{content.videoId}}'' frameborder='0' allow='autoplay; fullscreen'
			allowfullscreen></iframe>" data-company="{{content.videoCompany}}"{{/if}}>
				{{#if content.videoCompany}}
				{{else}}
					<iframe width="560" height="315" src="{{content.videoUrl}}{{content.videoId}}" frameborder="0" allow="autoplay; fullscreen"
			allowfullscreen></iframe>
				{{/if}}
			</div>
	 	{{/if}}
	 {{/if}}
</div>

Data File

video-embeded.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Variante 16:9"
			},
			"settings": {
				"videoEmbededContextClass": "",
				"videoEmbededClasses": "video-embeded_16_9"
			},
			"content": {
				"videoCompany": "youtube",
				"videoUrl": "https://www.youtube-nocookie.com/embed/",
				"videoId": "WUgvvPRH7Oc",
				"videoDataSecurityText":"Wenn Sie dieses eingebettete Video anzeigen, werden personenbezogene Daten an den Betreiber des Portals übertragen.",
				"videoDataSecurityLink":"",
				"videoDataSecurityLinkText":"You-Tube-Datenschutzrichtlinie",
				"videoDataSecurityButton":"Ich habe die Datenschutzbestimmungen zur Kenntnis genommen und möchte Videos anzeigen",
				"picture": {
					"settings": {
						"pictureContextClass": "video-embeded-img",
						"pictureClasses": false,
						"lazyload": false,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://placehold.co/400x200",
						"alt": "Alternative text that describes the image",
						"items": [
							{
								"srcset": [
									{
										"src": "https://placehold.co/400x200",
										"imageWidth": "400w"
									},
									{
										"src": "https://placehold.co/800x400",
										"imageWidth": "800w"
									},
									{
										"src": "https://placehold.co/1200x600",
										"imageWidth": "1200w"
									},
									{
										"src": "https://placehold.co/2400x1200",
										"imageWidth": "1600w"
									}
								],
								"sizes": [
									{
										"screenWidth": "(min-width: 1440px)",
										"imageWidth": "1440px"
									},
									{
										"screenWidth": "",
										"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
									}
								]
							}
						]
					}
				}
			}
		},
		"default_4_3": {
			"docs": {
				"variationName": "Variante 4:3"
			},
			"settings": {
				"videoEmbededContextClass": "",
				"videoEmbededClasses": "video-embeded_4_3"
			},
			"content": {
				"videoCompany": "youtube",
				"videoUrl": "https://www.youtube-nocookie.com/embed/",
				"videoId": "mM5_T-F1Yn4",
				"videoDataSecurityText":"Wenn Sie dieses eingebettete Video anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.",
				"videoDataSecurityLink":"",
				"videoDataSecurityLinkText":"You-Tube-Datenschutzrichtlinie",
				"videoDataSecurityButton":"Ich habe die Datenschutzbestimmungen zur Kenntnis genommen und möchte alle eingebetteten Videos von YouTube anzeigen",
				"picture": {
					"settings": {
						"pictureContextClass": "video-embeded-img",
						"pictureClasses": false,
						"lazyload": false,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://placehold.co/400x200",
						"alt": "Alternative text that describes the image",
						"items": [
							{
								"srcset": [
									{
										"src": "https://placehold.co/400x200",
										"imageWidth": "400w"
									},
									{
										"src": "https://placehold.co/800x400",
										"imageWidth": "800w"
									},
									{
										"src": "https://placehold.co/1200x600",
										"imageWidth": "1200w"
									},
									{
										"src": "https://placehold.co/2400x1200",
										"imageWidth": "1600w"
									}
								],
								"sizes": [
									{
										"screenWidth": "(min-width: 1440px)",
										"imageWidth": "1440px"
									},
									{
										"screenWidth": "",
										"imageWidth": "calc(100vw - ((100vw / 14) * 2)"
									}
								]
							}
						]
					}
				}
			}
		},
		"vimeo": {
			"docs": {
				"variationName": "Variante 16:9 (Vimeo)"
			},
			"settings": {
				"videoEmbededContextClass": "",
				"videoEmbededClasses": "video-embeded_16_9"
			},
			"content": {
				"videoCompany": "vimeo",
				"videoUrl": "https://player.vimeo.com/video/",
				"videoId": "311983548",
				"videoDataSecurityText":"Wenn Sie dieses eingebettete Video anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.",
				"videoDataSecurityLink":"",
				"videoDataSecurityLinkText":"Vimeo-Datenschutzrichtlinie",
				"videoDataSecurityButton":"Ich habe die Datenschutzbestimmungen zur Kenntnis genommen und möchte eingebetteten Videos anzeigen",
				"picture": {
					"settings": {
						"pictureContextClass": "video-embeded-img",
						"pictureClasses": false,
						"lazyload": false,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://placehold.co/400x200",
						"alt": "Alternative text that describes the image",
						"items": [
							{
								"srcset": [
									{
										"src": "https://placehold.co/400x200",
										"imageWidth": "400w"
									},
									{
										"src": "https://placehold.co/800x400",
										"imageWidth": "800w"
									},
									{
										"src": "https://placehold.co/1200x600",
										"imageWidth": "1200w"
									},
									{
										"src": "https://placehold.co/2400x1200",
										"imageWidth": "1600w"
									}
								],
								"sizes": [
									{
										"screenWidth": "(min-width: 1440px)",
										"imageWidth": "1440px"
									},
									{
										"screenWidth": "",
										"imageWidth": "calc(100vw - ((100vw / 14) * 2)"
									}
								]
							}
						]
					}
				}
			}
		},
		"lrz": {
			"docs": {
				"variationName": "Variante (LRZ)"
			},
			"settings": {
				"videoEmbededContextClass": "",
				"videoEmbededClasses": "video-embeded_16_9"
			},
			"content": {
				"videoUrl": "https://video.lrz.de/paella/ui/embed.html?id=",
				"videoId": "2e46f9af-7bae-4c17-be40-bf234ef105df"
			}
		}
	}
}

Styles

video-embeded.scss

/* ===================================================
component: video-embeded
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-video-embeded"] {
	position: relative;

	.video-embeded_box {
		position: relative;
		padding-top: 0;
		height: 0;
		overflow: hidden;
	}
	.video-embeded_16_9 {

		padding-bottom: 56.25%;
	}

	.video-embeded_4_3 {
		padding-bottom: 75%;
	}

	.video-embeded__hidden {
		display: none;
	}

	.video-embeded__img {
		background-color: $color-white;
		opacity: 0.6;
	}

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

	.video-embeded__container {
		position: relative;
	}


	.video-embeded__content-container {
		position: relative;
		border: 1px solid $color-gray-border;
		padding: 15px;
		background-color: $color-white;

		@include bp($bp-tablet-p) {
			position: absolute;
			margin: 0;
			bottom: 55px;
			left: 50%;
			transform: translate(-50%);
			width: 80%;
		}

		@include bp($bp-desktop-m) {
			width: 65%;
			bottom: 65px;
		}
	}

	.video-embeded__content {
		color: $color-dark;
		margin-bottom: 10px;

		p {
			font-family: $font-regular;
			font-size: 1.3rem;
			line-height: (17/13);
			font-weight: 400;
		}

		a {
			@include content-a-styles();
		}

		@include bp($bp-desktop-m) {
			margin-bottom: 20px;
		}
	}

	.video-embeded__button {
		position: relative;
		float: left;
		display: flex;
		justify-content: flex-start;
		align-items: stretch;
		width: 100%;
		background-color: $color-green;
		border: 1px solid $color-green;
		transition: background-color $animation-duration-std $animation-easing-std;
		cursor: pointer;

		@include print() {
			display: none;
		}



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

			.video-embeded__link {
				color: $color-green;
				border: 0px none transparent;

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

				&.is-external {

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

		.video-embeded__link {
			padding: 10px 30px 10px 50px;
			width: 100%;
			color: $color-white;
			text-align: left;
			border: 0px none transparent;
			background-color: transparent;
			text-decoration: none;
			font-size: 1.3rem;
			line-height: (17/13);
			font-family: $font-bold;
			transition: color $animation-duration-std $animation-easing-std;
			cursor: pointer;

			@include bp($bp-tablet-p) {
				padding: 20px 30px 20px 50px;
			}

			&:focus {
				outline: none;
			}

			&::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;
			}

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

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

				&.is-external {

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

			}
		}
	}
}
.c-video-embeded--lightbox {
	display: block;
	background-color: $color-white;

	.grid__row {
		max-width: none;
	}

	.video-embeded__content-container {
		bottom: 0px;
		left: 0px;
		width: 100%;
		position: absolute;
		margin: 0;
		border: none;
		transform: none;

		@include bp($bp-tablet-l) {
			width: 96%;
			margin: 2%;
		}
	}
}

Scripts

video-embeded.js

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

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

class VideoEmbeded 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: {

			},
			classes: {},
			selVideoCompanyYouTube: [],
			selVideoCompanyVimeo: [],
			videoCompanies: ["youtube", "vimeo"]
		};

		super(obj, options);
	}

	didMount() {
		console.log('Component VideoEmbeded mounted!');
		var videocookie = document.cookie;
		for (var i = 0; i < this.options.videoCompanies.length; i++) {
			let oneCompany = this.options.videoCompanies[i];
			var cookieentry = '' + oneCompany + '=true';
			if (videocookie.includes(cookieentry)) {
				let videoembedcompanyclassname= "video-embeded_company_" + oneCompany + "";
				let videoembedinfoclassname= "video-embeded__" + oneCompany + "";
				let videoCompanyElementsStart = document.getElementsByClassName(videoembedcompanyclassname);

				if(videoCompanyElementsStart.length > 0){
					if($(videoCompanyElementsStart[0]).hasClass('video-embeded__hidden')) {
						this.setDataSourceVideo(videoCompanyElementsStart);
						let videoInfoElementsStart = document.getElementsByClassName(videoembedinfoclassname);
						this.hideVideoInfo(videoInfoElementsStart);
						this.showVideo(videoCompanyElementsStart);
					}
				}
			}
		}
	}

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

	// Local Handlers
	get events() {

	}

	/**
	 * Bind events
	 *
	 */
	bindEvents() {

		this.options.selVideoCompanyYouTube = [].slice.call(
			this.el.querySelectorAll(
				'[data-js-item="js-video-embeded-youtube"]'
			)
		);
		this.options.selVideoCompanyVimeo = [].slice.call(
			this.el.querySelectorAll(
				'[data-js-item="js-video-embeded-vimeo"]'
			)
		);
		this.options.selVideoCompanyYouTube.forEach(youtubebutton => {

			youtubebutton.addEventListener('click', () => {
				this.jsShowVideoClick("youtube");
			});
		});
		this.options.selVideoCompanyVimeo.forEach(vimeobutton => {
			vimeobutton.addEventListener('click', () => {
				this.jsShowVideoClick("vimeo");
			});
		});

	}


	jsShowVideoClick(videocompany) {
		let videoembedinfoclassname= "video-embeded__" + videocompany + "";
		let videoembedcompanyclassname= "video-embeded_company_" + videocompany + "";
		let videoCompanyElements = document.getElementsByClassName(videoembedcompanyclassname);
		this.setDataSourceVideo(videoCompanyElements)
			let videoInfoElements = document.getElementsByClassName(videoembedinfoclassname);
			this.hideVideoInfo(videoInfoElements);
			this.showVideo(videoCompanyElements);
			document.cookie = '' + videocompany + '=true';
	}

	setDataSourceVideo(videoCompanyElements) {
		for (var i = 0; i < videoCompanyElements.length; i++) {
			var src = videoCompanyElements[i].dataset.src;
			src = src.replace(/\\/g, '');
			videoCompanyElements[i].innerHTML = src;
		}
	}

	hideVideoInfo(videoInfoElements) {
		for (var i = 0; i < videoInfoElements.length; i++) {
			let videoElement = videoInfoElements[i];
			$(videoElement).addClass('video-embeded__hidden');
		}
	}

	showVideo(videoCompanyElements) {
		for (var i = 0; i < videoCompanyElements.length; i++) {
			let videoCompanyElement = videoCompanyElements[i];
			$(videoCompanyElement).removeClass('video-embeded__hidden');
		}
	}
}

export default VideoEmbeded;

HTML Output

Variante 16:9

<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 
									  ,   calc(100vw - ((100vw / 14) * 2)) " />
				<!--[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 dieses eingebettete Video anzeigen, werden personenbezogene Daten an den Betreiber des Portals übertragen.</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 Videos 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 Videos 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>

Variante 4:3

<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 
									  ,   calc(100vw - ((100vw / 14) * 2) " />
				<!--[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 dieses eingebettete Video anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.</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 alle eingebetteten Videos von YouTube 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 alle eingebetteten Videos von YouTube anzeigen</a> -->
			</div>
			<div style="clear: both;"></div>
		</div>
	</div>
	<div class="video-embeded_box video-embeded_4_3 video-embeded_company_youtube video-embeded__hidden" data-src="<iframe width='560' height='315' src='https://www.youtube-nocookie.com/embed/mM5_T-F1Yn4'' frameborder='0' allow='autoplay; fullscreen'
			allowfullscreen></iframe>" data-company="youtube">
	</div>
</div>

Variante 16:9 (Vimeo)

<div class="c-video-embeded--default" data-css="c-video-embeded" data-js-module="video-embeded">
	<div class="video-embeded__container video-embeded__vimeo">
		<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 
									  ,   calc(100vw - ((100vw / 14) * 2) " />
				<!--[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 dieses eingebettete Video anzeigen, werden personenbezogene Daten (Ihre IP-Adresse) an den Betreiber des Portals übertragen.</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">Vimeo-Datenschutzrichtlinie</a>.</p>
			</div>
			<div class="video-embeded__button">
				<button type="button" class="video-embeded__link" data-company="vimeo" data-js-item="js-video-embeded-vimeo">Ich habe die Datenschutzbestimmungen zur Kenntnis genommen und möchte eingebetteten Videos anzeigen</button>
				<!-- <a href="#" class="video-embeded__link" data-company="vimeo" data-js-item="js-video-embeded-vimeo">Ich habe die Datenschutzbestimmungen zur Kenntnis genommen und möchte eingebetteten Videos anzeigen</a> -->
			</div>
			<div style="clear: both;"></div>
		</div>
	</div>
	<div class="video-embeded_box video-embeded_16_9 video-embeded_company_vimeo video-embeded__hidden" data-src="<iframe width='560' height='315' src='https://player.vimeo.com/video/311983548'' frameborder='0' allow='autoplay; fullscreen'
			allowfullscreen></iframe>" data-company="vimeo">
	</div>
</div>

Variante (LRZ)

<div class="c-video-embeded--default" data-css="c-video-embeded" data-js-module="video-embeded">
	<div class="video-embeded_box video-embeded_16_9">
		<iframe width="560" height="315" src="https://video.lrz.de/paella/ui/embed.html?id&#x3D;2e46f9af-7bae-4c17-be40-bf234ef105df" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
	</div>
</div>

Wonach suchst du?

Datenschutzhinweis mit Link