Video/Audio
Das Video Modul beinhaltet die benötigten Container und das Overlay um ein Video von Quellen wie Youtube oder Vimeo Datenschutzkonform anzuzeigen. Hierfür kann ein Vorschaubild durch das entsprechende eigene ersetzt werden, das Video von der gewünschten Quelle eingebunden werden und bei Klick auf den Button muss das Overlay ausgeblendet und das Video abgespielt werden (twoclick).
The Video module contains the required containers and the overlay for displaying videos from sources such as YouTube or Vimeo in compliance with data protection regulations. For this the preview image can be replaced with the respective image, the video from the desired source must be integrated and when the button is pressed, the overlay must be hidden and the video played (twoclick).
Info: Das Grundgerüst des Videomoduls ist unabhängig vom abzuspielenden Medium immer gleich. Einige Elemente wie die DGS-Kennzeichnung oder die Caption sind optional. Wird ein Datenschutzoverlay (twoclick) gewünscht, so reicht das Einfügen des Overlaycontainers mit der Klasse .js-video-consent-overlay.twoclick (siehe Beispiele). Dadurch wird das laden des Videos erst nach dem Klick des Buttons ausgelöst. Videos können auf unterschiedliche Weise in das Videomodul integriert werden (native html5, mediaelement, movingimage, iframe). Im folgenden werden verschiedene Beispiele gezeigt.
Table of contents
- Mediaelement Examples
- Movingimage Examples
- Html5 Examples
Mediaelement
.bde-mejs__player auf dem video-/audio Tag aktiviert. Weitere Information zu Mediaelement finden sie hier: Mediaelement Dokumentaion
Mediaelement MP4 video
Format: video/mp4 @ adobestock, Bild: adobestock
Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.
<div class="modul-video">
<h2 class="title" id="example_mp4">
Mediaelement MP4 video
</h2>
<div class="video-container">
<!-- video/audio container -->
<video class="bde-mejs__player" width="1024" height="576" preload="none" style="max-width: 100%" controls poster="../../styleguide/static/adobestock/AdobeStock_294487414_980px_16x9.jpg">
<source src="../../styleguide/static/adobestock/AdobeStock_850043007_Video_HD_Preview.mp4" type="video/mp4" />
<track kind="subtitles" src="../../styleguide/static/adobestock/AdobeStock_850043007_Video_HD_Preview_de.vtt" srclang="de" label="Deutsch" />
<track kind="subtitles" src="../../styleguide/static/adobestock/AdobeStock_850043007_Video_HD_Preview_en.srt" srclang="en" label="English" />
</video>
<!-- /video/audio container -->
</div>
<!-- info container -->
<p class="player-formats">
<span class="mediatype">Format: <a href="#">video/mp4</a> </span>
<span class="copyright">@ adobestock, Bild: adobestock</span>
</p>
<div class="caption">
<p>Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.</p>
</div>
<!-- /info container -->
</div>
Mediaelement video with twoclick (marked as DGS)
Video in deutscher Gebärdensprache
Format: video/mp4 @ adobestock, Bild: adobestock
Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.
<div class="modul-video">
<h2 class="title" id="example_mp4_twoclick">
Mediaelement video with twoclick (marked as DGS)
</h2>
<p>
<i class="bicon bicon-dgs" aria-hidden="true"></i> Video in deutscher Gebärdensprache
</p>
<div class="video-container">
<!-- two click container -->
<div class="js-video-consent-overlay twoclick">
<!-- optional preview/poster image: --><img class="preview_image" aria-hidden="true" src="../../styleguide/static/adobestock/AdobeStock_294487414_980px_16x9.jpg" alt="Alttext für Posterimage" loading="lazy">
<p class="overlay_text">
Beispieltext, bitte anpassen: Mit dem Aufruf des Videos erklären Sie sich einverstanden, dass Ihre Daten an <strong>[Datenquelle durch Quelle ersetzen]</strong> übermittelt werden. Weitere Informationen finden Sie in unserer <a target="_blank" href="#">Datenschutzerklärung</a>.
</p>
<button id="video_accept_1_0" class="button button--play js-video-consent-button" type="button">
Akzeptieren und anzeigen
</button>
</div>
<!-- /two click container -->
<!-- video/audio container -->
<video class="bde-mejs__player" width="1024" height="576" preload="none" style="max-width: 100%" controls poster="../../styleguide/static/adobestock/AdobeStock_294487414_980px_16x9.jpg">
<source src="" data-src="../../styleguide/static/adobestock/AdobeStock_850043007_Video_HD_Preview.mp4" type="video/mp4" />
<track kind="subtitles" src="" data-src="../../styleguide/static/adobestock/AdobeStock_850043007_Video_HD_Preview_de.vtt" srclang="de" label="Deutsch" />
<track kind="subtitles" src="" data-src="../../styleguide/static/adobestock/AdobeStock_850043007_Video_HD_Preview_en.srt" srclang="en" label="English" />
</video>
<!-- /video/audio container -->
</div>
<!-- info container -->
<p class="player-formats">
<span class="mediatype">Format: <a href="#">video/mp4</a> </span>
<span class="copyright">@ adobestock, Bild: adobestock</span>
</p>
<div class="caption">
<p>Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.</p>
</div>
<!-- /info container -->
</div>
Mediaelement audio
Format: audio/wav @ copyright
Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.
<div class="modul-video">
<h2 class="title" id="example_wav">
Mediaelement audio
</h2>
<div class="video-container">
<!-- video/audio container -->
<audio class="bde-mejs__player" width="640" style="max-width: 100%" controls="controls">
<source src="../../styleguide/static/birds.wav" type="audio/wav" />
</audio>
<!-- /video/audio container -->
</div>
<!-- info container -->
<p class="player-formats">
<span class="mediatype">Format: <a href="#">audio/wav</a> </span>
<span class="copyright">@ copyright</span>
</p>
<div class="caption">
<p>Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.</p>
</div>
<!-- /info container -->
</div>
Mediaelement audio with twoclick
Format: audio/wav @ copyright
Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.
<div class="modul-video">
<h2 class="title" id="example_wav_twoclick">
Mediaelement audio with twoclick
</h2>
<div class="video-container">
<!-- two click container -->
<div class="js-video-consent-overlay twoclick">
<p class="overlay_text">
Beispieltext, bitte anpassen: Mit dem Aufruf des Videos erklären Sie sich einverstanden, dass Ihre Daten an <strong>[Datenquelle durch Quelle ersetzen]</strong> übermittelt werden. Weitere Informationen finden Sie in unserer <a target="_blank" href="#">Datenschutzerklärung</a>.
</p>
<button id="video_accept_1_0" class="button button--play js-video-consent-button" type="button">
Akzeptieren und anzeigen
</button>
</div>
<!-- /two click container -->
<!-- video/audio container -->
<audio class="bde-mejs__player" width="640" style="max-width: 100%" controls="controls">
<source src="" data-src="../../styleguide/static/birds.wav" type="audio/wav" />
</audio>
<!-- /video/audio container -->
</div>
<!-- info container -->
<p class="player-formats">
<span class="mediatype">Format: <a href="#">audio/wav</a> </span>
<span class="copyright">@ copyright</span>
</p>
<div class="caption">
<p>Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.</p>
</div>
<!-- /info container -->
</div>
Mediaelement mit YouTube Video (direct URL in video/source)
Format: video/youtube @ YouTube/BerlinOnline, Bild: adobestock
Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.
<div class="modul-video">
<h2 class="title" id="youtube_mediaelement_url">
Mediaelement mit YouTube Video (direct URL in video/source)
</h2>
<div class="video-container">
<!-- two click container -->
<div class="js-video-consent-overlay twoclick">
<!-- optional preview/poster image: --><img class="preview_image" aria-hidden="true" src="../../styleguide/static/adobestock/AdobeStock_294487414_980px_16x9.jpg" alt="Alttext für Posterimage" loading="lazy">
<p class="overlay_text">
Beispieltext, bitte anpassen: Mit dem Aufruf des Videos erklären Sie sich einverstanden, dass Ihre Daten an <strong>[Datenquelle durch Quelle ersetzen]</strong> übermittelt werden. Weitere Informationen finden Sie in unserer <a target="_blank" href="#">Datenschutzerklärung</a>.
</p>
<button id="video_accept_1_0" class="button button--play js-video-consent-button" type="button">
Akzeptieren und anzeigen
</button>
</div>
<!-- /two click container -->
<!-- video/audio container -->
<video class="bde-mejs__player" width="1024" height="576" preload="none" style="max-width: 100%" controls poster="../../styleguide/static/adobestock/AdobeStock_294487414_980px_16x9.jpg">
<source src="" data-src="https://www.youtube.com/watch?v=qzg6QCRYGU4" type="video/youtube" />
</video>
<!-- /video/audio container -->
</div>
<!-- info container -->
<p class="player-formats">
<span class="mediatype">Format: <a href="#">video/youtube</a> </span>
<span class="copyright">@ YouTube/BerlinOnline, Bild: adobestock</span>
</p>
<div class="caption">
<p>Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.</p>
</div>
<!-- /info container -->
</div>
Movingimage
.bde-movingimage__player auf dem Platzhalter div aktiviert. Die nötigen Video und Channel ids werden über data Attribute gesetzt. Weitere Informationen finden sie auf der Movingimage Webseite
Movingimage
Format: video/movingimage @ Movingimage, Bild: adobestock
Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.
<div class="modul-video">
<h2 class="title" id="movingimage">
Movingimage
</h2>
<div class="video-container">
<!-- video/audio container -->
<div class="bde-movingimage__player" data-videoid="6EYsF8bTHCXqX28ABgwTFL" data-playerid="1vbZCF6fMpezmkhZVJUtHX" data-channelid="59872">
<!-- // -->
</div>
<!-- /video/audio container -->
</div>
<!-- info container -->
<p class="player-formats">
<span class="mediatype">Format: <a href="#">video/movingimage</a> </span>
<span class="copyright">@ Movingimage, Bild: adobestock</span>
</p>
<div class="caption">
<p>Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.</p>
</div>
<!-- /info container -->
</div>
Movingimage mit towclick
Format: video/movingimage @ Movingimage, Bild: adobestock
Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.
<div class="modul-video">
<h2 class="title" id="movingimage_twoclick">
Movingimage mit towclick
</h2>
<div class="video-container">
<!-- two click container -->
<div class="js-video-consent-overlay twoclick">
<!-- optional preview/poster image: --><img class="preview_image" aria-hidden="true" src="../../styleguide/static/adobestock/AdobeStock_294487414_980px_16x9.jpg" alt="Alttext für Posterimage" loading="lazy">
<p class="overlay_text">
Beispieltext, bitte anpassen: Mit dem Aufruf des Videos erklären Sie sich einverstanden, dass Ihre Daten an <strong>[Datenquelle durch Quelle ersetzen]</strong> übermittelt werden. Weitere Informationen finden Sie in unserer <a target="_blank" href="#">Datenschutzerklärung</a>.
</p>
<button id="video_accept_1_0" class="button button--play js-video-consent-button" type="button">
Akzeptieren und anzeigen
</button>
</div>
<!-- /two click container -->
<!-- video/audio container -->
<div class="bde-movingimage__player" data-videoid="6EYsF8bTHCXqX28ABgwTFL" data-playerid="1vbZCF6fMpezmkhZVJUtHX" data-channelid="59872">
<!-- // -->
</div>
<!-- /video/audio container -->
</div>
<!-- info container -->
<p class="player-formats">
<span class="mediatype">Format: <a href="#">video/movingimage</a> </span>
<span class="copyright">@ Movingimage, Bild: adobestock</span>
</p>
<div class="caption">
<p>Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.</p>
</div>
<!-- /info container -->
</div>
Html5 video
Format: video/mp4 @ adobestock, Bild: adobestock
Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.
<div class="modul-video">
<h2 class="title" id="native_html5_video">
Html5 video
</h2>
<div class="video-container">
<!-- video/audio container -->
<video style="max-width: 100%" controls poster="../../styleguide/static/adobestock/AdobeStock_294487414_980px_16x9.jpg">
<source src="../../styleguide/static/adobestock/AdobeStock_850043007_Video_HD_Preview.mp4" type="video/mp4" />
<track kind="subtitles" src="../../styleguide/static/adobestock/AdobeStock_850043007_Video_HD_Preview_de.vtt" srclang="de" label="Deutsch" />
<track kind="subtitles" src="../../styleguide/static/adobestock/AdobeStock_850043007_Video_HD_Preview_en.srt" srclang="en" label="English" />
</video>
<!-- /video/audio container -->
</div>
<!-- info container -->
<p class="player-formats">
<span class="mediatype">Format: <a href="#">video/mp4</a> </span>
<span class="copyright">@ adobestock, Bild: adobestock</span>
</p>
<div class="caption">
<p>Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.</p>
</div>
<!-- /info container -->
</div>
Html5 video with twoclick
Format: video/mp4 @ adobestock, Bild: adobestock
Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.
<div class="modul-video">
<h2 class="title" id="native_html5_video_twoclick">
Html5 video with twoclick
</h2>
<div class="video-container">
<!-- two click container -->
<div class="js-video-consent-overlay twoclick">
<!-- optional preview/poster image: --><img class="preview_image" aria-hidden="true" src="../../styleguide/static/adobestock/AdobeStock_294487414_980px_16x9.jpg" alt="Alttext für Posterimage" loading="lazy">
<p class="overlay_text">
Beispieltext, bitte anpassen: Mit dem Aufruf des Videos erklären Sie sich einverstanden, dass Ihre Daten an <strong>[Datenquelle durch Quelle ersetzen]</strong> übermittelt werden. Weitere Informationen finden Sie in unserer <a target="_blank" href="#">Datenschutzerklärung</a>.
</p>
<button id="video_accept_1_0" class="button button--play js-video-consent-button" type="button">
Akzeptieren und anzeigen
</button>
</div>
<!-- /two click container -->
<!-- video/audio container -->
<video style="max-width: 100%" controls poster="../../styleguide/static/adobestock/AdobeStock_294487414_980px_16x9.jpg">
<source src="" data-src="../../styleguide/static/adobestock/AdobeStock_850043007_Video_HD_Preview.mp4" type="video/mp4" />
<track kind="subtitles" src="" data-src="../../styleguide/static/adobestock/AdobeStock_850043007_Video_HD_Preview_de.vtt" srclang="de" label="Deutsch" />
<track kind="subtitles" src="" data-src="../../styleguide/static/adobestock/AdobeStock_850043007_Video_HD_Preview_en.srt" srclang="en" label="English" />
</video>
<!-- /video/audio container -->
</div>
<!-- info container -->
<p class="player-formats">
<span class="mediatype">Format: <a href="#">video/mp4</a> </span>
<span class="copyright">@ adobestock, Bild: adobestock</span>
</p>
<div class="caption">
<p>Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.</p>
</div>
<!-- /info container -->
</div>
Html5 audio
Format: audio/wav @ copyright
Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.
<div class="modul-video">
<h2 class="title" id="native_html5_audio">
Html5 audio
</h2>
<div class="video-container">
<!-- video/audio container -->
<audio style="max-width: 100%" controls="controls">
<source src="../../styleguide/static/birds.wav" type="audio/wav" />
</audio>
<!-- /video/audio container -->
</div>
<!-- info container -->
<p class="player-formats">
<span class="mediatype">Format: <a href="#">audio/wav</a> </span>
<span class="copyright">@ copyright</span>
</p>
<div class="caption">
<p>Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.</p>
</div>
<!-- /info container -->
</div>
Html5 audio with twoclick
Format: audio/wav @ copyright
Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.
<div class="modul-video">
<h2 class="title" id="native_html5_audio_twoclick">
Html5 audio with twoclick
</h2>
<div class="video-container">
<!-- two click container -->
<div class="js-video-consent-overlay twoclick">
<p class="overlay_text">
Beispieltext, bitte anpassen: Mit dem Aufruf des Videos erklären Sie sich einverstanden, dass Ihre Daten an <strong>[Datenquelle durch Quelle ersetzen]</strong> übermittelt werden. Weitere Informationen finden Sie in unserer <a target="_blank" href="#">Datenschutzerklärung</a>.
</p>
<button id="video_accept_1_0" class="button button--play js-video-consent-button" type="button">
Akzeptieren und anzeigen
</button>
</div>
<!-- /two click container -->
<!-- video/audio container -->
<audio style="max-width: 100%" controls="controls">
<source src="" data-src="../../styleguide/static/birds.wav" type="audio/wav" />
</audio>
<!-- /video/audio container -->
</div>
<!-- info container -->
<p class="player-formats">
<span class="mediatype">Format: <a href="#">audio/wav</a> </span>
<span class="copyright">@ copyright</span>
</p>
<div class="caption">
<p>Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.</p>
</div>
<!-- /info container -->
</div>
Iframe YouTube Video (embed URL)
Format: video/youtube @ YouTube/BerlinOnline, Bild: adobestock
Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.
<div class="modul-video">
<h2 class="title" id="youtube_iframe">
Iframe YouTube Video (embed URL)
</h2>
<div class="video-container">
<!-- video/audio container -->
<iframe src="https://www.youtube.com/embed/qzg6QCRYGU4?si=_Cq0-ngtBKLm0CvH" width="1024" height="576" style="max-width: 100%" >
</iframe>
<!-- /video/audio container -->
</div>
<!-- info container -->
<p class="player-formats">
<span class="mediatype">Format: <a href="#">video/youtube</a> </span>
<span class="copyright">@ YouTube/BerlinOnline, Bild: adobestock</span>
</p>
<div class="caption">
<p>Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.</p>
</div>
<!-- /info container -->
</div>
Iframe YouTube Video (embed URL) und twoclick
Format: video/youtube @ YouTube/BerlinOnline, Bild: adobestock
Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.
<div class="modul-video">
<h2 class="title" id="youtube_iframe_twoclick">
Iframe YouTube Video (embed URL) und twoclick
</h2>
<div class="video-container">
<!-- two click container -->
<div class="js-video-consent-overlay twoclick">
<!-- optional preview/poster image: --><img class="preview_image" aria-hidden="true" src="../../styleguide/static/adobestock/AdobeStock_294487414_980px_16x9.jpg" alt="Alttext für Posterimage" loading="lazy">
<p class="overlay_text">
Beispieltext, bitte anpassen: Mit dem Aufruf des Videos erklären Sie sich einverstanden, dass Ihre Daten an <strong>[Datenquelle durch Quelle ersetzen]</strong> übermittelt werden. Weitere Informationen finden Sie in unserer <a target="_blank" href="#">Datenschutzerklärung</a>.
</p>
<button id="video_accept_1_0" class="button button--play js-video-consent-button" type="button">
Akzeptieren und anzeigen
</button>
</div>
<!-- /two click container -->
<!-- video/audio container -->
<iframe src="" data-src="https://www.youtube.com/embed/qzg6QCRYGU4?si=_Cq0-ngtBKLm0CvH" width="1024" height="576" style="max-width: 100%" >
</iframe>
<!-- /video/audio container -->
</div>
<!-- info container -->
<p class="player-formats">
<span class="mediatype">Format: <a href="#">video/youtube</a> </span>
<span class="copyright">@ YouTube/BerlinOnline, Bild: adobestock</span>
</p>
<div class="caption">
<p>Optional caption, philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.</p>
</div>
<!-- /info container -->
</div>