Youtube in Colorbox!

Hallo, ich habe mich jetzt schon durch manche Forenbeiträge gewühlt und bin auf der Suche nach einer Losung für mein kleines Youtubeprobem. Ich benutze Contao 3.0.3 und möchte Youtubevideos gerne in der Colorbox darstellen. Im Layout habe ich jQuery eingestellt und mediaelement+colobox aktiviert. Alle anderen jQueryextensions funktionieren einwandfrei nur jetzt funktioniert leider das Video nicht.
Ich habe ein Inhaltselement Hyperlink erstellt und im Feld lightbox: lightbox[800 600] eingetragen. Die Colorbox öffnet sich aber der Content kann nicht geladen werden. Im link habe ich auch http://www.... eingegeben aber bringt alles nichts. Ich bin dankbar für jede erdenkliche Hilfe. Gruß

versuchs mal so: data-lightbox[800 600]

Nein leider funktioniert das auch nicht. Da kommt nur eine weiße leere Seite. Wenn ich lightbox[800 600] eingebe kommt die lightbox auch, aber das video kann nicht geladen werden.

Du musst das j_colorbox template anpassen und Optionen iframe und innerWidth sowie innerHeight mit aufnehmen. Die Datei müsste dann z.b. so aussehen:

Code:

---

<?php

// Add the colorbox style sheet
$GLOBALS['TL_CSS'][] = 'assets/jquery/colorbox/'. COLORBOX .'/css/colorbox.min.css||static';

?>

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/colorbox/<?php echo COLORBOX; ?>/js/colorbox.min.js"></script>
<script>
(function($) {
  $(document).ready(function() {
    $('a[data-lightbox]').map(function() {
      $(this).colorbox({
        // Put custom options here
        loop:false,
        rel:$(this).attr('data-lightbox'),
        maxWidth:'95%',
        maxHeight:'95%',
        iframe:true,
        innerWidth:500,
        innerHeight:409
      });
    });
  });
})(jQuery);
</script>

---

Bei CE Hyperlink musst du lightbox eintragen. Du könntest aber auch noch zahlen übergeben und dann bei inner width/height hinterlegen.

Hoffe das hilft dir.

Viele Grüße
Joe

Außerdem muss dein Link der embed Link sein nicht der normale :)

Als Beispiel folgende Video: http://www.youtube.com/watch?v=zpNv_JpKkaQ

Wenn du den Link kopierst kann das nicht funktionieren. Du benötigst den embed code. Der sieht wie folgt aus:

http://www.youtube.com/embed/zpNv_JpKkaQ

Ich verstehe zwar nicht warum, aber jetzt funktionierts. Danke vielmals!

Ja, das hilft. Allerdings fehlt mir bein einem Video nun das Close-Kreuz. Zudem habe ich so feste Werte...

@ab2211

Öhm... Ja :)

Wenn du dein Problem näher beschrieben würdest, vielleicht sogar mit einem Link zum Problem, könnte man dir sicher eher weiterhelfen. So bleibt es wohl nur bei dem geknotter :)

Danke Joe, das Post hat mir auch schon weitergeholfen.

Ist da bekannt ob das in irgendeiner Form in die nächste Version von Contao einfliesst? Ticket oder so was?

Gerne.

Ich habe keine Bemühungen angestrebt dafür ein Ticket zu erstellen. Ich selbst nutze jQuery recht wenig. Vielleicht sollte das aber mal getan werden.

Zitat:

---

Zitat von joe

@ab2211

Öhm... Ja :)

Wenn du dein Problem näher beschrieben würdest, vielleicht sogar mit einem Link zum Problem, könnte man dir sicher eher weiterhelfen. So bleibt es wohl nur bei dem geknotter :)

---

Ich dachte das war klar ausformuliert...
;-)

Nein, wenn ich den Code nutze, dann gilt das ja auch für die Lightbox bei einer Galerie und das passt nicht gut.
Bei einem Video fehlt mir das "Close" oben rechts, das flackert kurz auf und ist weg.
Ich bräuchte einen kleinen Tipp wie ich Videos in der Lightbox vielleicht mit bestimmten Parametern, hier also iframe und innerWidth sowie innerHeight, aufrufen kann ohne das Template zu verändern.

UPDATE: Nun ist es so, daß bei einem WMV-Video der Clos-Buton fehlt, ein FLV-Video wird zum Download angeboten anstatt in der Lightbox zu laufen und ein MP4-Video wird abgespielt, aber ohne Bild.

voll super - DANKE JOE!

eine andere version ohne template anpassung wäre zB:

Code:

---

<a class="example6" href="http://www.youtube.com/embed/KWRB-maTVyM" title="Xampp Installation">
Xampp Installation Video on YouTube</a>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
});
//]]>
</script>

---

fnktioniert ohne problem in einem html-element/modul oder über insert-tag

Hallo

Die Anleitung unten geht für mich als einziges. Habe sehr lange probiert.

HTML-Code:

---

Google Link: <a class="colorbox" href="{{form::Google_Maps}}[&amp;]output=embed" rel="lightbox">

---

Ich nehme nicht den Embed Link, wie zum Teil im Forum angewiesen. Sonder ich setze einfach Output=embed. Das geht auch. So ist es einfacher den Link weiterzugeben odera aus einer From zu lesen als der echte Embed Link von Google Maps.

Grüsse

Gibt es nicht die möglichkeit, dass sich die colorbox an die individuaellen maße des inhaltes (iframe) anpasst?
Oder gibt es eine möglichkeit bei jquery, dass man die größe so angibt:
"data-lightbox[800 600] " ?

Keiner eine idee, bei der mediabox hat das ja funktioniert.

hänge mich hier mal ein. iframe im template aufzunehmen macht ja sinn. aber innerwidth und innerheight ist ja dann global für alle colorboxen.
wie lässt sich das umgehen?


gruss andi

Ich krieg trotz der o.g. Template-Änderung diesen Fehler: "This content failed to load." -.-

Hallo,

ich habe das obern erwähnte, modifizierte Script unter Contao 3.2.20 im Einsatz - es funktioniert problemlos.

Jetzt sollte ich verschiedene Abmessungen in der Corlorbox haben. Gibt es mittlerweile die Möglichkeit, die Werte von innerWidth und innerHeight über Variablen zu steuern ( lightbox[450 300] wird zwar angegeben aber im Template j_colorbox.html5 nicht ausgewertet)? Kann man das Template so erweitern, dass die Abmessungen übernommen werden?

Der Kunde fordert jquery, keine mootools :rolleyes:

Schmidty