Video öffnet sich nicht in Lightbox

[monaco]

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?

[monaco]

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

[m-werk]

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


//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:

<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!