Eigenes Video

Video mittels HTML5 Video-Tag in Mobirise einbinden

Eigenes Video

Klicke auf das Video um es zu starten

Einbau vom Video

Ich habe hier lediglich eine einfache Mobirise Textbox verwendet und den Beispieltext mit dem HTML5 Video-Tag unten ersetzt.

Ich habe hier noch 3 verschiedene Video-Formate für die unterschiedlichen Browser konvertiert. Heute reichen die Format .mp4 und .ogg aber aus. Hier geht es zu einem Online-Converter.

Natürlich müsst Ihr Eure Videos dann händisch mit einem FTP-Programm (wie z.B. "FileZilla") in ein Verzeichnis Eurer Wahl auf den Server kopieren und dann mittels absoluter Pfadangabe im Video-Tag verlinken.


Hier das Video HTML5 Tag von meinem Beispiel, das ich in den "Code Editor" eines einfachen Textfeldes kopiert habe:

<video id="Unterwasser" width="640" controls="controls">
    <source src="http://www.mobirise-tutorials.com/Videos/tauchen.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="http://www.mobirise-tutorials.com/Videos/tauchen.webm" type='video/webm; codecs="vp8, vorbis"' /> 
    <source src="http://www.mobirise-tutorials.com/Videos/tauchen.ogv" type='video/ogg; codecs="theora, vorbis"' />
    Dieses HTML5 Video wird von Deinem Browser nicht unterstützt.
</video>


Hier meine CSS um das Video responsive zu machen, die ich in den Bereich "CSS Editor" vom "Code-Editor" kopiert habe:

video {
  max-width: 100% !IMPORTANT;
  height: auto !IMPORTANT;
}


Code Editor

Unten eine Ansicht vom Video-Tag im Code Editor und dem CSS Bereich

Code
Adresse

Schöne Strasse 1, Berlin

Deutschland

Counter

Counter Statistik