JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<div class="videocontainer"><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 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="youtube" id="X1F1IV6OzVE" data-width="400" data-height="400" data-related="0" data-controls="1" data-fullscreen="1" data-info="1" data-autoplay="0"></div>

<div class="videocontainer"><p><strong>YouTube Video aktivieren</strong><br>
Diese Website nutzt YouTube im erweiterten Datenschutzmodus für die Darstellung von Videos – <a class="videoconfirm" 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 class="youtube" id="oYJLbnXCqYI" data-playlist="oYJLbnXCqYI" 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="youtube" id="qdFD84QXCfI" data-width="400" data-height="400" data-related="0" data-controls="1" data-fullscreen="1" data-info="1" data-autoplay="0"></div>

<div class="videocontainer"><p><strong>YouTube Video aktivieren</strong><br>
Diese Website nutzt YouTube im erweiterten Datenschutzmodus für die Darstellung von Videos – <a class="videoconfirm" href="#">klicken Sie hier</a>, um es zu aktivieren. Ich...

CSS

.youtube {
  display: none;
}

/* .videocontainer ~ .youtube {
  background: #FF0;
} */

JavaScript

//load youtube video after confirmation
$(document).ready(function(){
$(".videoconfirm").on("click", function(e){
	e.preventDefault();
    if($(this).hasClass("all")){
			$(".videocontainer").each(function()   {
      	$(this).fadeOut();
        $(".youtube").addClass("start");
        if($(this).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 + "&amp;playlist=" + videoplaylist + "&amp;loop=" + videoloop + "&amp;enablejsapi=1' frameborder='0' allowfullscreen='" + videofullscreen + "'></iframe>");
          $(".youtube#"+videoid).fadeIn();
          $(this).addClass("loaded");
        }); //each function
        } //if
      }); //each function
    }
    else{
  $(this).parents(".videocontainer").fadeOut();
  $(this).parents(".videocontainer").next(".youtube").addClass("start");
  $(".youtube.start").next(".youtube").addClass("start");
  if($(this).parents(".videocontainer").next(".youtube.start...