Eigenes Video in Mobirise einbauen

CSS und andere hilfreiche Anweisungen
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Eigenes Video in Mobirise einbauen

Ungelesener Beitrag von Tommy Herrmann »

Da Mobirise nur Blöcke anbietet, die Videos von "YouTube" und anderen Video-Plattformen anzeigen, zeige ich hier das einfache HTML5 Video-Tag, zu dem ich hier eine Beispielseite habe:

https://www.mobirise-tutorials.com/Busi ... video.html

In meinem Beispiel habe ich dem Video lediglich eine Breite von 640px und die Player-Kontrolle zur Steuerung gegeben. Dieses Tag könnt ihr in jeden beliebigen Block einbauen. Meist bietet sich ein einfacher Textblock aus der Rubrik "Article" an.

Code: Alles auswählen

<video id="Unterwasser" width="640" controls="controls">
  <source src="https://www.example.com/videos/mein_video.mp4" type="video/mp4">
  Dieses HTML5 Video wird von deinem Browser nicht unterstützt.
</video>
Damit das Video auch am Handy und an kleineren Displays passt, habe ich mit dieser CSS, die ich im "Code Editor" im Bereich "CSS Editor" des Blocks einfügt habe, die Breite des <video> Tags </video> auf 100% limitiert und die Höhe automatisch angepasst:

Code: Alles auswählen

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

controls = zeigt die Player-Funtionen
loop = wiederholt das Video automatisch
autoplay = würde das Video automatisch starten
muted = Video wird stumm geschaltet

Die Attribute "autoplay" und zusätzlich "muted" eigenen sich um ein Video auch am mobilen Gerät automatisch abspielen zu lassen.

Hier findet ihr weitere, optionale Attribute:

https://www.w3schools.com/tags/tag_video.asp


Alle Browser zeigen die Video-Player ein wenig anders an.

Hier z.B. im Browser "Firefox":


Video im Firefox.JPG


Hier z.B. im Browser "Edge":


Video im Edge.JPG
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 10 Gäste