JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.4/js.cookie.js"></script>
<h1>YouTube Videos mit DS-Einwilligung</h1>
<div class="videocontainer">
<div class="ce_text">
<figure class="image_container float_above">
  <img src="https://picsum.photos/640/360" width="320" height="240" alt="" itemprop="image">
</figure>

<p><strong>YouTube Video aktivieren</strong><br>
Diese Website nutzt YouTube im erweiterten Datenschutzmodus für die Darstellung von Videos – <a class="videoconfirm all" href="#">klicken Sie hier</a>, um es zu aktivieren. Ich stimme zu, dass mit der Nutzung Daten an YouTube übertragen werden. Hinweis: Detaillierte Informationen zum Umgang mit Nutzerdaten finden Sie in unserer <a href="impressum-datenschutz.html" target="_blank">Datenschutzerklärung</a>.</p>
</div>
</div>

<div class="youtube" id="Sgc3dorXjRI" data-playlist="Sgc3dorXjRI" data-loop="1" data-width="600" data-height="300" data-related="0" data-controls="1" data-fullscreen="0" data-info="0" data-autoplay="0"></div>

<div class="videocontainer">
<div class="ce_text videoteaser">
<figure class="image_container float_above">
  <img src="https://picsum.photos/800/640" width="320" height="240" alt="" itemprop="image">
</figure>

<p><strong>YouTube Video aktivieren</strong><br>
Diese Website nutzt YouTube im erweiterten Datenschutzmodus für die Darstellung von Videos – <a class="videoconfirm all" href="#">klicken Sie hier</a>, um es zu aktivieren. Ich stimme zu, dass mit der Nutzung Daten an YouTube übertragen werden. Hinweis: Detaillierte Informationen zum Umgang mit Nutzerdaten finden Sie in unserer <a href="impressum-datenschutz.html" target="_blank">Datenschutzerklärung</a>.</p>
</div>
</div>

<div class="youtube" id="4HK29-f_HD8" data-width="400" data-height="400" data-related="0" data-controls="1" data-fullscreen="1" data-info="1" data-autoplay="0"></div>

CSS

.youtube {
  display: none;
}

.videocontainer p {
  display: none;
}

JavaScript

//load youtube video after confirmation
$(document).ready(function() {
  //Cookies.remove('youtube');
  var cookieyoutube = Cookies.get('youtube');
  console.log(cookieyoutube);
  var browserlang = document.getElementsByTagName('html')[0].getAttribute('lang');

  //Wenn YouTube Optin gesetzt ist
  if (cookieyoutube == "optin") {
    if (browserlang == 'de') {
      console.log("Youtube Opt-In ist aktiv.");
      $(".status .youtube").text("YouTube deaktivieren.").addClass("active");
    } else {
      console.log("YouTube Opt-In is active.");
      $(".status .youtube").text("Deactivate YouTube.").addClass("active");
    }

    $(".videocontainer").each(function() {
      $(this).fadeOut();
      $(this).next(".youtube").addClass("start");
    }); //each function

    $(".youtube.start").next(".youtube").addClass("start");
    if ($(this).parents(".videocontainer").next(".youtube.start iframe").length == 0) {
      $(".youtube.start:not('.loaded')").each(function() {
        var videoid = $(this).attr("id");
        var videowidth = $(".youtube#" + videoid).attr("data-width");
        var videoheight = $(".youtube#" + videoid).attr("data-height");
        var videorelated = $(".youtube#" + videoid).attr("data-related");
        var videocontrols = $(".youtube#" + videoid).attr("data-controls");
        var videofullscreen = $(".youtube#" + videoid).attr("data-fullscreen");
        var videoinfo = $(".youtube#" + videoid).attr("data-info");
        var videoautoplay = $(".youtube#" + videoid).attr("data-autoplay");
        var videoplaylist = $(".youtube#" + videoid).attr("data-playlist");
        var videoloop = $(".youtube#" + videoid).attr("data-loop");

        $(".youtube.start:not('.loaded')#" + videoid).append("<iframe width='" + videowidth + "' height='" + videoheight + "' src='https://www.youtube-nocookie.com/embed/" + videoid + "?rel=" + videorelated + "&amp;controls=" + videocontrols + "&amp;showinfo=" + videoinfo + "&amp;autoplay=" + videoautoplay +...