Video
letzte Aktualisierung der Seite: Version 2.17.1
Die Video-Komponente dient der datenschutzkonformen Einbindung von YouTube-Videos anhand einer speziellen URL. Zur Aktivierung des Videos ist eine Zwei-Klick-Lösung implementiert, die einen Datenschutzlayer zur Anzeige bringt. Die Einbindung erfolgt im 16:9 Bildformat. Informationen zur Gestaltung eines Videos sind zu finden unter: Video
JavaScript-Einbindung
Quellcode
window.additionalComponent.load('youtube', {
el: '[data-component="6871987987"]'
});
Parameter und Attribute
Funktionsaufruf - Zeile 3:
| Name | Bedeutung | Werte | Obligatorisch |
|---|---|---|---|
data-component |
Attribut des HTML-Knotes an dem die Video-Komponente initialisiert wird | textuell, frei definierbar | JA |
HTML-Einbindung
Quellcode
<div class="box">
<h2 class="box-header">Youtube</h2>
<div class="box-body">
<div class="box-media">
<div id="video-wrapper36307"
data-element="youtube"
class="video-wrapper embed-responsive embed-responsive-16by9"
data-youtube-path="https://www.youtube-nocookie.com/embed/JobGHu9_1Xk?rel=0"
data-component="6871987987">
</div>
</div>
</div>
<div class="box-footer">
<ul class="list-links">
<li><a href="https://www.youtube.com/user/FreistaatSachsen">Videos im Youtube-Kanal</a></li>
</ul>
</div>
</div>
Parameter und Attribute
DIV-Tag - Zeile 5:
| Attribut | Bedeutung | Wert | Obligatorisch |
|---|---|---|---|
data-element |
Name des Elements, auf das JavaScript-Funktionalitäten aufgerufen werden. | youtube |
JA |
data-youtube-path |
Pfad zum YouTube-Video. Es ist darauf zu achten, dass die datenschutzkonforme Domain https://www.youtube-nocookie.com genutzt wird. |
URL | JA |
data-component |
Dient der Identifikation mittels JavaScript und muss dem Wert data-component aus dem JavaScript-Code entscodechen. | alphanumerischer Wert | JA |
HTML-Einbindung des Videos mit alternativem Vorschaubild
Quellcode
<div class="box">
<h2 class="box-header">Youtube</h2>
<div class="box-body">
<div class="box-media">
<div id="video-wrapper36307" class="video-wrapper embed-responsive embed-responsive-16by9" data-element="youtube" data-youtube-path="https://www.youtube-nocookie.com/embed/JobGHu9_1Xk?rel=0" aria-describedby="transcript-36307" data-component="6871987987"
data-alt-srcset="
./img/vorschaubild_youtube_90x51.jpg 90w,
./img/vorschaubild_youtube_260x147.jpg 260w,
./img/vorschaubild_youtube_445x251.jpg 445w,
./img/vorschaubild_youtube_780x441.jpg 780w,
./img/vorschaubild_youtube_1095x618.jpg 1095w,
./img/vorschaubild_youtube_1095x618.jpg 1095w,
./img/vorschaubild_youtube.jpg 1760w"
data-alt-max-width="1760"
data-alt-alt="Alternativtext">
<div class="sr-only" id="transcript-36307">
<h4 data-element="transcript-title">Video von Ministerpräsident Stanislav Tillich</h4>
<p>Ministerpräsident Stanislav Tillich spricht: Liebe Mitbürgerinnen und Mitbürger ...</p>
</div>
</div>
</div>
</div>
<div class="box-footer">
<ul class="list-links">
<li><a href="https://www.youtube.com/user/FreistaatSachsen">Videos im Youtube-Kanal</a></li>
</ul>
</div>
</div>
Erläuterung
Bei der Einbindung eines YouTube-Videos wird aus Datenschutzgründen ein Bild angezeigt, bis der Nutzer den Datenschutzbestimmungen zustimmt. Dieses Sperrbild wird vom Styleguide bereitgestellt, kann aber mit einem eigenen Vorschaubild ersetzt werden. Die Einbindung des Videos verändert sich dadurch wie folgt:
- Von Zeile 6 bis Zeile 14 wird das responsive Vorschaubild definiert. (siehe Responsive Bilder)
- In Zeile 15 wird der Alternativtext des Vorschaubildes übergeben.
- Von Zeile 16 bis Zeile 19 kann optional ein Transkript des Videos angeboten werden.
