Medien & Videos einbinden

Allgemeine Vorgehensweise

Videomaterial, egal ob extern oder intern, sollte immer als Overlay geöffnet werden.

Dies hat zum einen den Vorteil, dass immer ein gleichbleibendes Aussehen der Videos gewährleistet ist (da über das Overlay vorgegeben) und die Breite der Videos bei direkter Einbindung in die Seite nicht durch die Spaltenbreite beschränkt wird.

Zum anderen kann der Benutzer anhand der Link-Icons extern eingebundene Medienquellen leicht identifizieren und gezielt ansteuern, ohne dass der Aufbau der Seite durch das direkt eingebundene Video ausgebremst wird.


Beispiele für externe Medien

Über eine kleine Erweiterung, genannt fancybox, ist es dem Redakteur problemlos möglich, verschiedene externe Quellen in die Website einzubinden und diese in einem Overlay zu Öffnen.

Die fancybox bietet "native" Unterstützung für folgende Formate durch Auswahl der RTE-Klasse "overlay fancybox.media" beim Anlegen eines Links:


Bild-Teaser für Video

Auch über die Option zum Verlinken von Bildern kann ein Video direkt im Overlay geöffnet werden. Dazu verwendet man folgendes Schema für den Link:

Wichtig ist, dass zwischen den einzelnen Parametern immer ein Leerzeichen gesetzt ist. Der Link variiert natürlich, während "Linkziel" (_blank) und "CSS-Klasse(n)" (overlay) immer identisch bleiben.

Insgesamt existieren vier Parameter, die mit Leerzeichen getrennt gesetzt werden können, diese sind:

  • Linkadresse
  • Linkziel
  • CSS-Klasse(n)
  • Linktitel

Die einzelnen Attribute können auch durch einen Bindestrich (-) ersetzt werden, um das jeweilige Attribut nicht setzen zu müssen, aber weitere Attribute verwenden zu können:

  • Linkadresse - CSS-Klasse1 CSS-Klasse2 - Linktitel
  • Beispiel: www.elemente-websolutions.ms - "overlay fancybox.iframe" "Website elemente websolutions"

In dem obrigen Beispiel ist das Linkziel nicht gesetzt.

Im Fall der YouTube Videos erkennt die fancybox automatisch den Videoinhalt, andere Links - wie die Website http://www.elemente-websolutions.ms benötigen die zusätzliche CSS-Klasse "fancybox.iframe".

Wichtig ist, dass in diesem Fall die gewünschten Attribute mit Hochkommata eingeschlossen werden (in dem Beispiel die Attribute CSS-Klasse(n) und Linktitel), da nach wie vor das Leerzeichen als Trenner fungiert.