Eigenes Video in Mobirise einbauen
Verfasst: Mo 1. Nov 2021, 08:12
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.
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:
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":
Hier z.B. im Browser "Edge":
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>
Code: Alles auswählen
video {
max-width: 100% !IMPORTANT;
height: auto !IMPORTANT;
}
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":
Hier z.B. im Browser "Edge":