Video als Seitenhintergrund

[scherenschlag]

Moin.
Ich würde gerne mal , also erstmal zu Testzwecken, ein Video als Seitenhintergrund einfügen.
Mal schauen wie es aussieht.
Und zwar für meine Gaststättenseite "Zur Sonne".
Soll bedeuten:
Blauer Himmel. Sonnenschein. Sonne. Vielleicht ein paar kleine Wolken die vorbeiziehen.
Wäre nur für die Startseite. Wenn überhaupt.
Ich habe im Netz zwar noch kein passendes Video gefunden. Sollte aber möglich sein.
Nur: Wie baue ich das Video ein? Als gesamt Seitenhintergrund.
Foto hatte ich schon mal hinbekommen.

[Tommy Herrmann]

Moin Thomas,

was genau willst Du denn mit dem Video-Hintergrund versehen, nur einen Block oder die gesamte Seite - also alle Blöcke der Startseite?

Die Header-Blöcke von Mobirise bieten ja fast alle die Option "Video" als Hintergrund zu wählen, dazu musst Du ja nur die Optionsschaltfläche einschalten.

Gib mal im Suchen-Bereich "Video" auf meiner Übersichtsseite ein, da findest Du dann schon etliche Beispiele:

https://www.mobirise-tutorials.com/Tutorial-Links/

Wenn es der gesamte Hintergrund (Fullscreen Background) sein soll, rate ich Dir mal gleich davon ab - aus folgenden Gründen.

1.) Das ist sehr aufwendig, denn jeder Block muss händisch transparent gemacht werden. Mobirise bietet dafür auch keine Blöcke an, das muss also alles händisch codiert werden. Das funktioniert eventuell nicht an allen Geräten, wie dem iPhone - das muss geprüft werden.

2.) Ein Video kann sich ja nicht responsive anpassen, da es sonst verzerren würde, und wird daher sehr klein am Handy dargestellt, daher sollte man überlegen, dass man am Handy vielleicht dann einen anderen Hintergrund wählt. Dann dürfen aber die Blöcke nicht transparent sein und man müsste quasi zwei unterschiedliche Seiten gestalten, was ganz schlecht ist.

3.) Schrift auf einem Video zu lesen ist fast unmöglich. Entweder sieht man dann das Video nur schlecht oder man kann den Text nicht lesen, ganz schlecht, wenn man etwas verkaufen will.

4.) Ich kann den Zusammenhang zwischen einem solchen Video und einer Kneipe beim besten Willen nicht erkennen. Vielleicht wäre es sinnvoll, wenn das Video die ursprüngliche Gegend des Restaurants in Griechenland oder die Gerichte zeigen würde. Selbst dann wäre es jedoch besser, das Video in einem Block zu integrieren, anstatt es auf der gesamten Seite als Hintergrund einzusetzen.



Beispiele:

Fullscreen-Background als Video:

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

Slider als Video-Background, nimm die Maus über dem Video weg, damit der Slider nicht stoppt:

https://www.mobirise-tutorials.com/Tuto ... Video.html

Eigenes Video-Background Script:

https://www.mobirise-tutorials.com/Test ... round.html


P.S.:

Gucke mal bei "Pixabay", dort kannst Du unter Videos mal zum "Suchen" eingeben: "Himmel" oder "Sonne":

https://pixabay.com/de/videos/search/sonne/

Die Videos können kostenlos herunter geladen und verwendet werden.

[scherenschlag]

Moin Tommy.
Alles klar. Danke.
So etwas hatte ich mir schon gedacht.
Ein Block ok. Auch kein Problem für mich....
Ich werde mich auf einen Block beschränken. War ja auch nur eine Idee.
Was den Zusammenhang angeht:
Also die Lokalität heißt Gaststätte & Restaurant "Zur Sonne". Hat eine Außengastronomie.
Wenn man da nicht einen blauen Himmel mit Sonne einfügt, bei welcher Kneipe dann?

[Tommy Herrmann]

Moin,

ich habe ja zuletzt die Bootstrap class="sticky-top" für mich entdeckt. Damit kann man ein Video sehr einfach fixieren. Ich bereite mal ein kleines Beispiel vor.

Melde mich in Kürze ...

[Tommy Herrmann]

Hier mal eine Kopie meiner Seite "Sticky-Top", jedoch mit Video-Hintergrund, der hinter der gesamten Seite liegt. Dies nur auf die Schnelle - ich passe das eventuell noch etwas "schöner" an:

https://www.mobirise-tutorials.com/Tuto ... Video.html

[scherenschlag]

Ja. Das ist doch schon toll.
So was in der Art habe ich "geplant".
Da bleibe ich am Ball.
Muss jetzt nämlich in die Sonne....

[Tommy Herrmann]

Diese Variante ist extrem einfach zu realisieren und funktioniert an jedem Gerät.

Ich habe alle Details auf meiner Seite beschrieben, einschließlich der Anleitung, wie man den Inhalt – wie Texte und Buttons – im Header-Video-Block beim Scrollen ausblenden kann. So bleibt nur das Video als Hintergrund sichtbar, was das Gesamtbild deutlich verbessert.

https://www.mobirise-tutorials.com/Tuto ... Video.html

[scherenschlag]

Moin.
Habe mich an deine Anweisungen gehgalten. Glaube ich zumindest.
Doch egal welches Bild ich nehme. Egal welchen Block.
Ergebnis ist immer:

Interner Fehler beim verarbeiten der Seite index.html


https://www.tsad17.de

[Tommy Herrmann]

Moin,

also zunächst hast Du schon mal die Bootstrap class falsch geschrieben, es fehlt der Bindestrich:

<section data-bs-version="5.1" class="header7 sticky top cid-uJyUD8idaX" id="header07-2">

Richtig wäre:

<section data-bs-version="5.1" class="header7 sticky-top cid-uJyUD8idaX" id="header07-2">

Und wieso fügst Du einen FTP Zugang als Video ein (habe die Daten geändert)

Code: Alles auswählen

<div class="mbr-figure col-12 col-md-8"><video style="width:100%" controls autoplay loop playsinline><source src="sftp://u123456@home123456.1and1-data.host/1234-123456_tiny.mp4?loop=1&amp;autoplay=1"/></video></div>

Da fügst Du als Video die URL (Webadresse) zu dem Video ein. Also dann:

https://www.tsad17.de/4753-179739298_tiny.mp4

Code: Alles auswählen

https://www.tsad17.de/4753-179739298_tiny.mp4

[scherenschlag]

Moin.
Diesen verflixten Bindestrich habe ich überhaupt nicht gesehen oder realisiert.
Habe nochmal alles nach deiner Anweisung eingegeben. Und was soll ich sagen:
Funktioniert....
Jetzt muss ich nur noch einen passenden Sonnenhimmel finden.

[Tommy Herrmann]

… also, ich befürchte, dass Du da gerade vollkommen falsche Wege gehst

Auf Deiner Seite ist jetzt ein Video-Block zu sehen und kein Video als Hintergrund.

Nur darum geht es doch die ganze Zeit

Für so einen Header-Block wählst Du z.B. im Standard-Thema "Mobirise5" diesen Block (siehe Screenshot):

und stelle den Hintergrund (Background) dann auf "Video", direkt darunter fügst Du die URL zum Video ein:

… und dann fügst Du die class="sticky-top" oben am <section> Tag ein und im Bereich CSS-Editor den z-index: 0; - eben ganz genau so wie in meinem Tutorial das ALLES haarklein beschrieben ist.

https://www.mobirise-tutorials.com/Tuto ... Video.html


P.S.:

Klassennamen haben niemals Leerzeichen, das gibt es nicht. Leerzeichen, Umlaute oder Sonderzeichen sind nicht erlaubt.

Um ein Element mit mehreren Klassen zu versehen, werden die Klassennamen im CSS Class-Attribut durch Leerzeichen getrennt, z.B.: <div class="meine-farbe fett">. Dies wären dann zwei CSS-Klassen, nämlich die Klasse "meine-farbe" und die Klasse "fett", getrennt durch ein Leerzeichen.

[scherenschlag]

So besser?

https://www.tsad17.de

[Tommy Herrmann]

Moin,

ja - zumindest ist das jetzt ein Hintergrund-Video.

Du musst natürlich nun mal 2 oder 3 andere Blöcke darunter einfügen, damit man überhaupt scrollen kann …

… ich meine, wenn Du da nichts zu scrollen hast, kann man doch gar nicht den Effekt sehen

[scherenschlag]

Ja. Ja.
Das kommt noch.
War ja erstmal nur ein Versuch ob ich es hin bekomme.
Ist nur meine Testseite....

[Tommy Herrmann]

… das ist mir schon klar.

Nur es ist doch erst dann ein Test, wenn Du siehst, was beim Scrollen passiert.

Vorher ist es nichts, außer ein ganz normaler Video-Hintergrund, den es in fast allen Header-Blöcken von Mobirise gibt.

Denke auch daran, einen Screenshot von dem Himmel Video zu machen und den dann als "Fallback-Image" (alternatives Bild, wenn Video noch lädt oder nicht angezeigt werden kann) einzusetzen, denn das "Fallback-Image" blitzt kurz auf, solange das Video lädt. Das ist gerade die Frau mit dem Lolly, die Mobirise an der Stelle als Standard verwendet.

[scherenschlag]

Mache ich.
Danke.

[Tommy Herrmann]

Moin,

sehe gerade, dass Du es jetzt mal beispielhaft auf Deiner Testseite mit dem "sticky-top" und einem Video hinbekommen hast:

https://www.tsad17.de/

Ich finde den Ansatz schon mal sehr gut