Video in Jimdo Website einfügen

Viele User und Userinnen möchten gern eigene Videos in ihre Jimdo Website einfügen. Seit der DSGVO bekomme ich öfter die Anfrage: wie kann ich ein Video ohne Youtube oder Vimeo in meine Website einfügen?

Mit HTML5 gibt uns die Möglichkeit Videos direkt in einer Website einzufügen.

Jimdo unterstützt schon einige Jahre HTML5, was die Umsetzung einfach ohne zusätzlichen Player ermöglicht.
Die Zeit der alten Browser, welches dieses noch nicht unterstützen ist langsam vorbei. 

• Das Video in mpg4-Format
• einen einfachen Editor auf dem PC, Laptop
• den Code in HTML5
• in Jimdo ein Download-Element
• und ein HTML/ Widget - Element

Achten Sie darauf, dass:

ihr Video nicht zu groß in der Datei ist.

das Video einen ordentlichen Titel haben. Vermeiden Sie Sonderzeichen im Titel. &, ., Umlaute, Leerzeichen. 

Beachten Sie auch die Abmessungen. I.d.R. reicht eine Breite von 800px aus.

Um das Video im späteren Video-Codes einzufügen, muss das Video online gespeichert werden. Da es in Jimdo kein frei verfügbarer Speicherplatz vorhanden ist, verwenden wir das Element Datei-Download. 

Ja, man kann nicht nur Dokumente, PDF´s mit diesem Element verwenden.

Achten Sie darauf, dass ihr Video klein in der Datei ist. Der Download ist bei Jimdo auf 50 MB beschränkt.

Öffnen Sie den einfachen Editor auf ihrem Gerät.

Unter Windows 10 geben Sie "Editor" ein. Bei älteren Windows-Systemen finden Sie den Editor unter Zubehör > Editor.

Wechseln Sie die Seite mit dem Download-Element auf Besucher-Ansicht. 

Klicken Sie in der Besucher-Ansicht mit der rechten Maustaste auf das kleine Icon vor dem Text.

Hier in der Abbildung, die Anzeige mit dem Browser Chrome.

Klicken Sie auf: Adresse des Links kopieren

Fügen Sie den jetzt im Zwischenspeicher befindlichen Link in den Editor ein.

Sie können den hier angezeigten HTML-Code kopieren und im Editor für die weitere Bearbeitung einfügen.

Ersetzen Sie im Code den Teil "LINKADRESSE_Video" mit dem zwischengespeicherten Pfad ihres Videos.

Zum Abgleich -  der Video-Code sollte dann so aussehen:

Öffnen Sie die Seite wo das Video angezeigt werden soll.

Fügen Sie über Inhalt hinzufügen ein HTML/Widget ein.

Im HTML/Widget übertragen Sie bitte den angepassten Video-Code aus dem Editor.

Speichern nicht vergessen.

automatischer Start des Videos

User möchten oft, dass ein Video sofort bei Aufruf der Seite startet. Wenn das Video als Hintergrund verwendet wird, oder als Headerbild eingesetzt wird, ist es bei sehr kleinen Videos sicher in Ordnung. Doch sonst ist dies eher nicht zu empfehlen. Zum einen sollte die Seite erst fertig geladen sein, zum zweiten lassen Sie ihre Besucher bitte selbst entscheiden, wann das Video angezeigt wird.

Wenn doch gewünscht, dann können Sie mit der Erweiterung: 

autoplay="autoplay"

dies erreichen.

Video soll sich in Schleife laufen?

Für die Wiederholung gibt es diese Erweiterung:

loop="loop" .

Anzeige Video mittig mit Boardmitteln umsetzen

Falls das Video in der Mitte des Seite angezeigt werden soll, können Sie das Video auch in ein Spalten-Element, mit 3 Spalten, einfügen. 

Bitte beachten Sie, dass Videos so viel Platz einnehmen, wie deren Größe ist und den gesamten verfügbaren Platz einnehmen.

Anzeige auf mobilen Geräten, bzw. optimiert anzeigen

Für zu breite Videos, wie auch für die Anzeige mittig, bedarf es für eine korrekte Anzeige, gerade auch auf mobilen Geräten, etwas eigenen CSS-Code. 

Auch Rahmen, Schatten oder eine Hintergrundfarbe um das Video ist so leicht möglich. 

Für Videos, welche mit Ton sind und in Schleife laufen sollen, bitte folgenden Code verwenden.

Mit zusätzlichem DIV und Klassen um den Video-Code für eine einfache Eigenschaften-Zuweisung per CSS.

Beispielsweise

.responsive-video{display:inline-block;max-width:90%;margin: 20px auto}