Hauptinhalt

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.
zurück zum Seitenanfang