Video öffnet sich nicht in Lightbox

Hi zusammen,
ich habe ein Video, welches sich per Link in einer Lightbox öffnen soll. Auf der Website Link (Song - This Is Me):
öffnet sich die lightbox leider nicht.
Wenn ich den Code wie hier im Beispiel (https://codepen.io/davidleduc/pen/EPrgqY) lokal in meinem Notepad++ ausführe, funktioniert es.
Kann mir jemand einen Tipp geben?

Könnte da vielleicht nochmal jemand drüber schauen? Ich finde meinen Fehler nicht, warum das Video sich nicht in der LightBox öffnet.

Hi, ich verwende dies bei mir anders. Ich hab im Template eine j_colorbox herangezogen und daraus j_colorbox_youtube gemacht. Im Code hab ich folgendes stehen:

PHP-Code:

---

<?php


//Contao 4
$GLOBALS['TL_CSS'][] = 'assets/colorbox/css/colorbox.min.css|static';

// Language arrays
// All
$cbLang = array(
  'current'  => 'image {current} of {total}',
  'previous' => 'previous',
  'next'     => 'next',
  'close'    => 'close',
  'xhrError' => 'This content failed to load.',
  'imgError' => 'This image failed to load.'
);
// DE
if($GLOBALS['TL_LANGUAGE'] == 'de')
{
  $cbLang = array(
    'current'  => 'Bild {current} von {total}',
    'previous' => 'zurück',
    'next'     => 'weiter',
    'close'    => 'schließen',
    'xhrError' => 'Laden des Inhalts fehlgeschlagen.',
    'imgError' => 'Laden des Bildes fehlgeschlagen.'
  );
}

?>

<script src="<?= TL_ASSETS_URL ?>assets/colorbox/js/colorbox.min.js"></script>

<script>
  (function($) {
    $(document).ready(function() {
      $('a[data-lightbox]').map(function() {
        var isIFrame = false;

        if($(this).attr('href').split('.').pop() == 'mp4' || $(this).attr('href').split('.').pop() == 'html' || $(this).attr('href').indexOf('youtube-nocookie.com') != -1) {
          isIFrame = true;
        }

        $(this).colorbox({
          // Put custom options here
          loop: false,
          rel: $(this).attr('data-lightbox'),
          maxWidth: '95%',
          maxHeight: '95%',
          width: isIFrame ? '60%' : false,
          height: isIFrame ? '70%' : false,
          iframe: isIFrame,
          // internationalization
          current: '<?= $cbLang['current'] ?>',
          previous: '<?= $cbLang['previous'] ?>',
          next: '<?= $cbLang['next'] ?>',
          close: '<?= $cbLang['close'] ?>',
          xhrError: '<?= $cbLang['xhrError'] ?>',
          imgError: '<?= $cbLang['imgError'] ?>'
        });
      });
    });
  })(jQuery);
</script>

---

Und für die Ausgabe ist der Link so definiert:

HTML-Code:

---

<a data-lightbox="" href="https://www.youtube-nocookie.com/embed/<?= $podcast['ytkey']; ?>" title="<?= $podcast['title']; ?>"><?= $podcast['title']; ?></a>

---

Ich hab hierfür ein eigenes Modul und dies hab ich im Template so stehen. Funktioniert einwandfrei.

Die j_colorboy_youtube nicht vergessen ins Layout einzubinden!