In a neon wilderness he was restless

Zur Installation Ihrer neuen Videoload-Möglichkeiten ist eine einmalige Anpassung des Twoday-Skins Site.page erforderlich:

1. Melden Sie sich auf Twoday mit Ihrem Account an und rufen Sie Ihr Blog auf.
2. Wählen Sie in der Menüzeile oben Admin → Layout und dann Skins (HTML).
3. Klicken Sie auf die Überschrift Hauptseite (Site.page), danach in das Feld mit dem Scrollbalken und wandern Sie ganz an das untere Ende der Anzeige.
4. Kopieren Sie dort vor das abschließende </body>-Element folgende Zeilen hinein:

   <script type="text/javascript" src="<% staticURL %>cdn/files/videoload2-min-js.js"></script>
   <script type="text/javascript">video2day.run();</script>

   Wie kopiere ich das?

    Kopieren einfach gemacht

   Fahren Sie mit der Maus über das schwarze Codefeld oben und klicken dort auf pop-up. Markieren Sie den Text in dem erscheinenden Pop-Up-Fenster und kopieren Sie ihn in die Zwischen­ablage. Gehen Sie nun in Ihren Skin Site.page und kopieren dort aus der Zwischenablage an die richtige Stelle vor </body>.

   Ihr Skin Site.page sollte nun in etwa so aussehen:

   <% staticURL %> ist ein Twoday-Makro und steht für "https://static.twoday.net/", dem abgesicherten Blogspeicher für Twoday-Bilder oder -Dateien.

5. Klicken Sie auf "Speichern und Schließen" um Ihre Änderungen zu sichern. Sie können nun zu jeder Zeit in Ihren Twoday-Beiträgen Video- und Audioelemente der aufgeführten Plattformanbieter einbinden. Wie das funktioniert, finden Sie im übernächsten Abschnitt Videoload verwenden.

Falls Sie bereits die Erstversion des Videoload-Scripts nutzen, sollten Sie auf die neue Version 2 umstellen. Hierzu ist der Aufruf von Videoload im Skin Site.page anzupassen bzw. zu ergänzen.

Bisher steht dort am Ende des Skins, vor dem abschließenden </body>-Befehl, folgender Eintrag:

<script type="text/javascript" src="<% staticURL %>cdn/files/videoload-min-js.js"></script>

Bitte ändern/erweitern Sie den Aufruf wie folgt:

<script type="text/javascript" src="<% staticURL %>cdn/files/videoload2-min-js.js"></script>
<script type="text/javascript">video2day.run();</script>

Wie kopiere ich das?

d.h. also in Zeile 1 den Scriptnamen videoload in videoload2 ändern und die zweite Zeile darunter ergänzen.

Um ein Video in einem Beitrag anzuzeigen, verwenden Sie einen einfachen DIV-Befehl, der z.B. für ein YouTube-Video so aussieht:

<div class="html5video youtube" id="DyfM7oLIlp0"></div> …

An der feststehenden Zeichenkette html5video erkennt das Videoload-Script, dass es innerhalb dieses div-Elements eine Einbettung vornehmen soll. Die darauf folgende Anbieterkennung bezeichnet die Plattform, von der das anzuzeigende Objekt stammt. Im Beispiel oben soll ein Youtube-Video generiert werden. Im Attribut id legen Sie fest, welches Youtube-Video angezeigt wird (jedes Anbieterelement hat eine eindeutige Identifikation).

Die betreffende ID findet sich meist recht einfach im Einbettungs­code des Videoanbieters (dem <iframe>-Befehl) und besteht i.d.R. aus einer kurzen Kombination von Zahlen und Buchstaben. In der Tabelle "Individuelle Parameter je Anbieter" weiter unten finden Sie eine genaue Information, wie Sie die benötigte ID bei jedem Anbieter manuell ermitteln. Außerdem stelle ich im Folgekapitel ein Tool vor, das die notwendigen Daten voll­automatisch aus dem kopierten iframe-Einbettungs­code ermittelt und für Sie den korrekten Twoday-DIV-Befehl gebrauchsfertig zusammenstellt. Damit entfällt die manchmal etwas umständliche Suche nach der richtigen ID.

Die passende Kennung für einen der 16 möglichen Anbieter finden Sie unten als Beschriftung in den blauen Tabulatoren. Um also ein Vimeo-Video einzufügen, heißt der entsprechende DIV-Befehl

<div class="html5video vimeo" id="{eine-vimeo-id}"></div>

Für die Anzeige eines GIFs von giphy.com wäre das DIV-Element folgendermaßen zu schreiben:

<div class="html5video giphy" id="{eine-giphy-id}"></div>

Minimal benötigt eine Einbettung also stets drei Informationen: den feststehenden Bezeichner html5video, die Textkennung des gewünschten Anbieters und die eindeutige ID des anzuzeigenden Elements.

Ergänzende Einstellparameter

Es gibt weitere Parameter, mit denen Sie die Breite und das Seitenverhältnis des einzubettenden Elements beeinflussen können. Diese beiden Parameter sind für alle Anbieter zulässig.

width — Breite festlegen/begrenzen

Im oben gezeigten Beispiel nimmt das Youtube-Video die volle Breite des umgebenden Containers ein, d.h. es füllt die Twoday-Beitragsspalte horizontal vollkommen aus. Falls Sie das Video kleiner darstellen wollen, können Sie zusätzlich eine Breitenangabe mithilfe des width-Parameters machen. Für eine Breite von z.B. 350 Pixeln lautet der Befehl:

<div class="html5video youtube width-350" id="DyfM7oLIlp0"></div> …

ratio — Seitenverhältnis einstellen/korrigieren

Die meisten Videos haben ein Seitenverhältnis von 16:9, d.h. ein Verhältnis von Breite zu Höhe von 1,77778. Manche Videos haben noch ein 4:3 Verhältnis (1,33333) und wieder andere eine sehr individuelle Streckung (z.B. bei Breitbildformaten). Das Script verwendet im Standard die 16:9-Anzeige. Wenn das Video verzerrt dargestellt wird, können Sie ein eigenes Seitenverhältnis einstellen. Der Befehl für ein Vine-Video mit einem Seitenverhältnis von 1,0 und einer Breite von 400 Pixeln lautet dann:

<div class="html5video vine ratio-1 width-400" id="OTtQVYI2JY2"></div> …

Dies bewirkt in diesem Fall, dass das Video die gleiche Höhe wie Breite erhält, d.h. 400 Pixel breit und hoch ist.

Neben diesen beiden grundsätzlich verwendbaren Parametern gibt es je Plattform verschiedene individuelle Parameter, mit denen man bestimmte Funktionen oder Darstellungsweisen des Anbieters aktiviert. Diese sind je Plattform in den nachstehenden Tabs beschrieben.

Individuelle Parameter je Anbieter

Klick auf ein Tab öffnet die Dokumentation für diesen Anbieter

Twoday-Videoload-Code automatisch generieren

Es ist evtl. etwas mühsam, die oben beschriebenen Parameter für jeden der 16 Anbieter im Kopf zu behalten oder erst wieder nachzuschlagen, wenn man sie benötigt. Aus diesem Grund habe ich zusätzlich ein kleines Online-Tool erstellt, das den Twoday-Code automatisch für Sie zusammenstellt.

Sie müssen nur noch den vom jeweiligen Anbieter bereitgestellten iframe-Einbettungscode in das Formularfeld iframe-Code des Tools kopieren 1. Dieses erkennt die jeweilige Quellplattform, extrahiert die korrekte ID des Elements sowie alle anderen erkannten Einstellparameter. Daraus generiert es den kopierfertigen HTML-Befehl für Ihren Twoday-Beitrag und zeigt diesen im Feld HTML-Code an 2.

Beispiel: Bandcamp-Audio

Nehmen wir ein konkretes Beispiel: Sie möchten das Album "Love & War & The Sea In Between" (Josh Garrels) von der Plattform Bandcamp in einen neuen Twoday-Beitrag einbetten. Sie haben den entsprechenden iframe-Befehl auf seiner Albumseite ermittelt und in die Zwischenablage kopiert. Nach Aufruf des Videotools fügen Sie den kopierten iframe-Befehl in das Eingabefeld iframe-Code ein 1.

Das Videotool analysiert den übergebenen Befehl und stellt alle erkannten Parameter in einem speziellen DIV-Kommando2 zusammen, aus dem das Videoload-Script später wieder den eigentlichen Einbettungsbefehl erstellt.

Unter dem HTML-Befehl zeigt das Tool das von Ihnen gewünschte Element an, und zwar so wie es später auch beim Aufruf des Beitrags zu sehen sein wird 3. Sie haben nun die Möglichkeit, die Anzeige weiter zu konfi­gurieren, z.B. Größe und Erscheinungsbild zu ändern oder weitere Parametereinstellungen vorzunehmen, die für diesen Anbieter zulässig sind. Klicken Sie hierfür auf die grüne Schaltfläche "Parameter ändern / manuell setzen...".

Statt des iframe-Code-Feldes wird nun eine Detailansicht mit allen verfügbaren Einstellparametern angezeigt. Die einzelnen Felder sind bereits mit den Werten vorbelegt, die aus dem iframe-Befehl herausgelesen werden konnten. Ändern Sie eine Einstellung, wird der zugehörige HTML-Befehl sofort neu generiert und als Kopiervorlage angezeigt.

Wenn Sie z.B. die Bandcamp-Linkfarbe ändern und zusätzlich eine Tracklist mit 6 Songs anzeigen wollen, stellen Sie dies in den zugehörigen Feldern ein. Unmittelbar passt das Tool auch den HTML-Befehl an die veränderten Einstellwerte an.

Das tatsächliche Aussehen des Elements können Sie unterhalb des Codes kontrollieren. Entspricht alles Ihren Vorstellungen, markieren Sie den fertigen HTML-Befehl und kopieren ihn in die Zwischenablage.

Navigieren Sie nun zu Ihrem Beitrag und fügen Sie den kopierten Code an der gewünschten Stelle in den Text ein:

Dieser Ablauf funktioniert für jeden der 16 Anbieter identisch. Wollen Sie also ein YouTube-Video in Ihren Beitrag einfügen, kopieren Sie den entsprechenden iframe-Code des Videos und das Tool zeigt Ihnen das passende DIV-Kommando für die Einbettung im Twoday-Beitrag.

Das Videotool finden Sie dauerhaft unter folgender Linkadresse:

https://neonwilderness.twoday.net/stories/videotool2

oder per Schaltfläche hier im Beitrag sowie rechts unten in der Sidebar:

Videotool aufrufen...

Script-Verhalten über Parameter steuern

Im Aufruf des Videoload-Scripts video2day.run(); (siehe Abschnitt "Installation") müssen keine Parameter innerhalb der Klammer mitgegeben werden, wenn Sie die Standardeinstellungen nutzen wollen. Gleichwohl kennt das Script eine Reihe von Einstellparametern, mit denen Sie sein Verhalten beeinflussen können. Diese werden nachstehend erläutert. Parameter übergeben Sie stets in geschweiften Klammern, wobei die einzelnen Parameter durch Komma getrennt sind:

video2day.run( {parameter1: wert, parameter2: wert, ... , parameterx: wert} );

Um z.B. die Breite für alle Videoload-Elemente auf maximal 400 Pixel zu begrenzen und außerdem den Debug-Modus einzuschalten, muss der Videoload-Aufruf inkl. der entsprechenden Parameter folgendermaßen aussehen:

video2day.run( {maxWidth: 400, debug: true} );

Die Reihenfolge der Parameter untereinander ist beliebig. Folgende Möglichkeiten stehen zur Verfügung: