Video im Popup Mobirise 5.2

[Jürgen-Yin]

Hallo Zusammen,

Tommy hat auf seiner Tutorial Seite erklärt, wie man eigene Videos in Mobirise Vers. 5.2 enbinden kann und auch den Code dazu gestellt. Das ist alles verständlich. Er hat auch ein Beispiel für den Popup Builder gezeigt, jedoch ohne Code. Wie bindet man hier den Code ein? Hier sind ja einige Dinge von Mobirise im Code.

Kann mir da jemand helfen, denn ich habe nichts gefunden.

Danke

[Tommy Herrmann]

Moin Jürgen,

und willkommen im Forum

... meinst Du diese Seite?

https://mobirise-tutorials.com/BusinessM4/video.html

Das hatte ich ebenso, wie das Video auf der Seite selbst, eingebaut.

Nachteil (bisher), das Video läuft im Hintergrund weiter, wenn man das Popup schließt (man sollte es also vorher stoppen)!

Dafür würde es noch ein JavaScript benötigen, dass ich noch nicht geschrieben habe und mich auch noch nicht damit beschäftigt hatte. Daher weiß ich auch gerade noch nicht wie. Das ist wohl auch nicht so wirklich einfach, denn das Popup verwendet JavaScript und CSS von "Bootstrap" und da müsste man das JavaScript von Bootstrap manipulieren.

Ich habe einfach meinen Code, wie auf der Seite selbst beschrieben, anstelle des Inhaltes in den Code vom Popup kopiert. Dazu bin ich so vorgegangen:

> unter den Werkzeugen vom Popup-Builder die Wahl für den Inhalt getroffen > Content Type > none

> Dann habe ich meinen Video-Code, direkt unter dem Modal-Body-DIV, in den Bereich "HTML Editor" ...

<div class="modal-body">

... eingefügt (im Screenshot markiert):

Code: Alles auswählen

<!-- Beginn eigenes Video Tag -->
<video id="popup-video" width="640" controls="controls" loop="loop">
    <source src="https://www.mobirise-tutorials.com/BusinessM4/Videos/tauchen.mp4" type="video/mp4">
    <source src="https://www.mobirise-tutorials.com/BusinessM4/Videos/tauchen.ogv" type="video/ogg">
    Dieses HTML5 Video wird von Deinem Browser nicht unterstützt.
</video>
<!-- Ende eigenes Video Tag -->

Weiterhin habe ich noch (rechts) im Bereich "CSS Editor" (ganz unten) dem Video-Tag etwas CSS gegeben, damit sich das Video an die Breite der Größe des Popups anpasst (auch im Screenshot markiert), hier also maximal die Breite des Popup-Fensters erreicht - also 100%:

Code: Alles auswählen

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

... also im Grunde ganz genauso, wie auch auf meiner Seite im Tutorial beschrieben - nur eben im Code des "Popup Builders".


... für ein YouTube Video hat Mobirise eine eigene Lösung geschaffen, die Du hier sehen kannst:

https://mobirise-tutorials.com/Business ... ilder.html

Scrolle etwas runter - bis zur Übersicht - und wähle die Kachel "Video".

Dazu wählt man dann bei den Werkzeugen vom "Popup Builder" > Content Type > Video und trägt seine URL zum YouTube Video ein.

[Jürgen-Yin]

Hallo Tommy,

super! Vielen Dank hierfür. Das war eine superpräzise Angabe.

[Ulli]

Hallo Mobirise-Gemeinde,

ich habe festgestellt, dass generell die Popup´s bei Mobirise (... egal ob mit Button, Bild, Video versehen) "sich schließen", wenn man daneben klickt. Das ist ja auch nicht Sinn der Sache. Kann man das verhindern?! Danke für Tips und einen schönen Tag, Ulli

[Tommy Herrmann]

Moin,

das ist so gedacht. Man kann das ändern - musst Du mal probieren und googeln. Ich selbst habe es noch nicht versucht und auch gerade dazu keine Zeit.

https://stackoverflow.com/questions/222 ... lose-modal

[Ulli]

... danke Tommy.

[Tommy Herrmann]

... ich habe das jetzt mal probiert.

Das geht total einfach. Du fügst lediglich diese Bootstrap-Anweisung an das Modal dran:

data-backdrop="static"

also dann so:

<div class="modal mbr-popup" tabindex="-1" role="dialog" data-backdrop="static">

Hier habe ich das mal mit eingebaut, klicke gleich oben auf den Button: "Popup Default":

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

... im "Code Editor" sieht es dann so aus (markiert):