Video-Placeholder Image

[stobi_de]

Morgen!

https://www.monika-rekelhof.de/powertropfen.php

Hier ist ein lokales Video eingesetzt.
War es früher nicht mal, das dort ein Vorschaubild aus dem Video erzeugt wurde?
Bei mir sehe ich nur schwarz - was natürlich nicht ok ist.

Frank

[Tommy Herrmann]

Moin,

Nee - das gab es nicht.

Du kannst aber ein "Poster" drauf legen, also wie z.B. hier, bei diesem "Portrait" Video:

https://www.mobirise-tutorials.com/Tuto ... l#portrait

Code: Alles auswählen

<video id="upPopVideo" width="50%" loop="" height="auto" poster="https://www.mobirise-tutorials.com/images/Garten-Poster.jpg" controls="">
  <source src="https://www.mobirise-tutorials.com/videos/2023-im-Garten.mp4">
    Your browser does not support the video tag.
</video>

Dein Video fängt schwarz an. Normalerweise sollte ein Video mit einem Bild, also der Aufnahme, starten. Dann wird diese Startposition als Bild dargestellt.

[stobi_de]

Bei Youtube videos klappt das automatisch.

So gehts nicht mit dem Standard-Code

Code: Alles auswählen

<iframe src="https://www.monika-rekelhof.de/video/video1046056956.mp4" width="800" height="600" poster="https://www.mobirise-tutorials.com/images/Garten-Poster.jpg"></iframe>

[Tommy Herrmann]

Da muss man aber auch ein Poster bestimmen oder sie dürfen eben nicht schwarz beginnen. Das Video wurde falsch aufgenommen.

Bei eigenen Videos ist das noch nie da gewesen, wie auch, Mobirise kann ja nicht wissen, was man anzeigen will.

[Tommy Herrmann]

Nee - der Standard-Code von Mobirise kann das nicht.

Da benötigst Du das HTML5 Video-Tag (wie oben gezeigt). Kannst doch das Iframe einfach damit ersetzen.

Oder das Video bearbeiten und die 1 Sekunde schwarz vorne entfernen.

[stobi_de]

Die Sekunde SCHWARZ vorne hatte ich gar nicht gesehen - DANKE!

Code: Alles auswählen

<figure class="mbr-figure align-center" mbr-class="{'container':fullWidth==false}">
		<div class="video-block" mbr-style="{'width':videoSize+'%'}">
			
				<video id="upPopVideo" width="100%" height="auto" poster="https://www.monika-rekelhof.de/video/video-allgemein.jpg" controls="">
  <source src="https://www.monika-rekelhof.de/video/video1046056956.mp4">
    Your browser does not support the video tag.
</video>
			
		</div>
	</figure>

[Tommy Herrmann]

also, den ganzen Mobirise-Kram um das Video-Tag solltest Du eher weglassen.

[Tommy Herrmann]

Code: Alles auswählen

<div class="d-flex justify-content-center">     
    <video id="upPopVideo" width="100%" height="auto" poster="https://www.monika-rekelhof.de/video/video-allgemein.jpg" controls="">
      <source src="https://www.monika-rekelhof.de/video/video1046056956.mp4">
        Your browser does not support the video tag.
    </video>
</div>

... wobei die Breite mit 100% muss vielleicht noch angepasst werden mit zusätzlich "max-width", also z.B. noch den Selector in den "CSS Editor" packen:

Code: Alles auswählen

video {
  max-width: 800px;
}