Colorbox und Youtube

Holger Weischenberg | 24.06.2014
Dieser Beitrag ist über ein Jahr alt. Im Internet ist das eine Ewigkeit.

So geht das!

Ein Youtube-Video eingebettet in einer Colorbox öffnen.

Zuerst benötigen wir einen Link zu einem Youtube-Video. Auf zum Öffentlichen-Rundfunk 2.0:

Das Modul Colorbox gibt folgende Einstellungen für einen Link vor:

[path]?width=500&height=500&iframe=true" or "[path]?width=500&height=500

 

Der Beispiel-Einbettungslink von Youtube lautet (siehe auch im ersten Screenshot):

<iframe width="853" height="480" src="//www.youtube.com/embed/-cUWFLBZU5I?list=PL15BE2E8313A4E809" frameborder="0" allowfullscreen></iframe>

 

Daraus wird:

www.youtube.com/embed/-cUWFLBZU5I?width=853&height=480&iframe=true

Jetzt brauchen wir noch als Schaltfläche ein beliebiges Bild. Sobald hochgeladen wird das Bild ausgewählt und mittels WYSIWYG-Editor ein Link hinzugefügt.

Zuerst wird der oben erstellte Link in das dafür vorgesehene Feld eingetragen:

Dann wird als Stylesheet Klasse colorbox-load eingetragen:

Fertig!

Nachtrag

Wenn das Video automatisch abgespielten werden soll, muss die URL um autoplay=1& ergänzt werden:

www.youtube.com/embed/-cUWFLBZU5I?autoplay=1&width=853&height=480&iframe=true
Modules

Gut. Das war jetzt eine Recherche-Aufgabe. Colorbox-inline ist für Content auf der jeweiligen Website gedacht - mit externen Verweisen z.B. zu einem iFrame, wie oben erklärt funktioniert die Klasse nicht.

Die Klasse benötigt zum Beispiel den Verweis auf eine ID

Der Link sieht dann wie folgt aus:

?width=500&inline=true#main-content

Den entsprechenden Hinweis findet man unter meineseite.de/admin/config/media/colorbox :

Inline-Colorbox aktivieren

This enables custom links that can open inline content in a Colorbox. Add the class "colorbox-inline" to the link and build the url like this "?width=500&height=500&inline=true#id-of-content". Other modules may activate this for easy Colorbox integration.
 
Weitere Quelle:
 

Kommentieren