Video (twoclick)

Das Video Modul beinhaltet die benötigten Container und das Overlay um ein Video von Quellen wie Youtube oder Vimeo Datenschutzkonform anzuzeigen. Hierfür muss das 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. Um eine möglichst hohe Flexibilität für verschieden Quellen zu gewährleisten werden diese Schritte dem Verwendenden des Styleguides überlassen. Videos werden zentriert angezeigt.

Twoclick video layout example

Mit dem Aufruf des Videos erklären Sie sich einverstanden, dass Ihre Daten an YouTube übermittelt werden. Weitere Informationen finden Sie in unserer Datenschutzerklärung.

Formate: video/youtube

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">Twoclick video layout example</h2>
    <div class="video-container">

        <!-- two click container -->
        <div class="twoclick">
            <img class="preview_image" aria-hidden="true" src="../../dummy/adobestock/AdobeStock_296758444_400px.jpg" alt="Fotolia Test MaxSize" loading="lazy">            <p class="overlay_text">
                Mit dem Aufruf des Videos erklären Sie sich einverstanden, dass Ihre Daten an <strong>YouTube</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 setcookie overlay_video_go" type="button">
                Akzeptieren und Abspielen            
            </button>
        </div>
        <!-- /two click container -->

        <p class="player-formats" id="player__1_0-mode">
            Formate: <a href="#">video/youtube</a>   
        </p>
    </div>
    <div class="caption">
        <p>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>
</div>

DGS video marking example

Video in deutscher Gebärdensprache

Mit dem Aufruf des Videos erklären Sie sich einverstanden, dass Ihre Daten an YouTube übermittelt werden. Weitere Informationen finden Sie in unserer Datenschutzerklärung.

Formate: video/youtube

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">DGS video marking example</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="twoclick">
            <img class="preview_image" aria-hidden="true" src="../../dummy/adobestock/AdobeStock_296758444_400px.jpg" alt="Fotolia Test MaxSize" loading="lazy">            <p class="overlay_text">
                Mit dem Aufruf des Videos erklären Sie sich einverstanden, dass Ihre Daten an <strong>YouTube</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 setcookie overlay_video_go" type="button">
                Akzeptieren und Abspielen            
            </button>
        </div>
        <!-- /two click container -->

        <p class="player-formats" id="player__1_0-mode">
            Formate: <a href="#">video/youtube</a>   
        </p>
    </div>
    <div class="caption">
        <p>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>
</div>