Beim Hochladen von Bildern gehen nicht gespeicherte Änderungen an Artikeln verloren. Bitte vorher speichern.

Zuerst das Bild hochladen. Zum Einbinden den Button im Editor klicken und "img/[bildname.png]" eintragen.

neu
löschen

Um die Ladezeit zu minimieren, werden Videos mithilfe eines Bootstrap-Snippets eingebunden.

Dazu muss der Seite bzw. dem Template ein Javascript-Snippets unten im <body> oder besser in einer externen JS-Datei hinzugefügt werden:

$(".video-load").click(function () {
    $(this).after('<div class="embed-responsive embed-responsive-16by9"><iframe type="text/html" class="border embed-responsive-item"  src="' + jQuery(this).attr("data-src") + '" allowfullscreen></iframe></div>');
    $(this).hide();
});

Das Snippet ist bereits eingebunden auf:

  • blog2social.com
  • blog2social.com/en/faq

Es muss zum Video ein Thumbnail erstellt werden in der späteren anzeigegröße des Videos (also z.B. 16:9 mit 600px Breite). Um klar zu machen, dass es sich um ein Video handelt, ein Play-Symbol in das Bild einbauen.

Dieses Bild wird dort eingebunden, wo das Video angezeigt werden soll. Klickt ein User auf das Bild, öffnet sich das Video. Die für den Player erforderlichen Scripte werden erst dann nachgeladen.

Das HTML zum Einbinden des Videos sieht so aus:

<img src="[Bild-URL]" alt="[ALT-Text des Bildes]" data-src="https://www.youtube.com/embed/[Youtube-ID des Videos]?theme=light&rel=0&showinfo=0&modestbranding=1&color=white&controls=1&autoplay=1&autohide=0&fs=1&iv_load_policy=3&origin=http://www.blog2social.com" class="video-load img-responsive [optional: weitere Klassen]">

Text in [Klammern] entsprechend ersetzen.