Hallo
Ich bin neu in eurem Forum, da ich neu etwas Webpages erstelle mit WebDesigner pro 365.
Ich würde gerne wissen, ob es möglich ist, eine Filmsequenz als Hintergrund einer Seite zu implementieren.
Sehe das des Oefteren und finde das Resultat manchmal sehr geglückt.
Wenn mir hier jemand helfen könnte?
Vielen Dank in die Runde.
Thomas
Es gibt sicher mehrere Möglichkeiten das zu realisieren. Eine Lösung, die mit ein paar Zeilen JS/CSS auskommt, wird hier erklärt.
Die online Demo, die mit den gezeigten Codes gemacht wurde, kannst Du hier ansehen.
Die dazu gehörende WD Projektdatei (inkl. aller Codes) kannst Du hier herunterladen.
Die in der Beschreibung genannte Methode, mehrere, verschiedene Video Dateien (mp4, ogv, webm) einzubinden, ist heute nicht mehr erforderlich. Da die modernen Browser alle mit dem mp4 Video Format klar kommen, genügt es die Video Datei in diesem einen Format (mp4) einzubinden.
Viel Erfolg
Edit: 23:03 h
fehlenden Link ergänzt 😔
Lieber BeRo
Das ging ja schnell. Ich teste das gleich mal aus;-)
Vielen Dank!
ThomaS
Die Onlinedemo macht genau das. Das ist ja super. Nur:
Wo füge ich den Code denn ein?
Und füge ich genau diesen Code ein?:
<html>
<style>
body, html { width:100%; width:100%; margin:0; padding:0;}
section { position:absolute; top:0; left:0; bottom:0; right:0; width:100%; hight:100%; overflow:hidden; }
section video { min-width:100%; min-height:100%; position:absolute; top:0; left:0; bottom:0; right:0; }
</style>
<body>
<section>
<video loop="loop" preload="auto" autoplay="" muted="muted">
<source src="./index_htm_files/platzhalter.mp4" type="video/mp4"></source>
</section>
</body>
</html>
Und fett platzhalter.mp4 ist dann mein Video.
Du merkst, ich habe null Idee betreffend html. Deshalb arbeite ich ja auch mit dem Web Designer;-)
LG
Thomas
[...] Wo füge ich den Code denn ein? [...]
In den HTML Head-, Body der Seite, auf der Dein Video zu sehen sein soll...
[...] Und füge ich genau diesen Code ein? [...]
Im Prinzip schon, aber mit ein paar kleinen Anpassungen...
Der u. a. CSS Code gehört in den Head Bereich:
<style type="text/css">
body, html { width:100%; width:100%; margin:0; padding:0;}
section { position:absolute; top:0; left:0; bottom:0; right:0; width:100%; hight:100%; overflow:hidden; }
section video { min-width:100%; min-height:100%; position:absolute; top:0; left:0; bottom:0; right:0; }
</style>
Der u. a. HTML Code (Section- und Video Tag) gehört in den Body Bereich:
<section> <video loop="loop" preload="auto" poster="index_htm_files/polina.jpg" autoplay muted> <source src="./index_htm_files/polina.mp4" type="video/mp4"></source> <div>Schade – hier könnten Sie ein Video sehen, wenn Ihr Browser HTML5 Unterstützung hätte!</div> </video> </section>
Die fett markierten Dateinamen stehen...
Du hast Dir ja offenbar auch die Projektdatei zu meiner Demo heruntergeladen. Da findest Du alle Steuerdateien (CSS + HTML Tags) in den oben genannten Bereichen.
Schau's Dir mal an und experimentiere ein bisschen damit...
Viel Erfolg
Wow, da kann ja kaum mehr etwas schief gehen. Habe aber in nächster Zeit keine Kapazitäten das zu testen und zu versuchen.
Melde mich aber sobald ich den Faden wieder aufnehme.
Tausend Dank dafür!
LG
Thomas
[...] Melde mich aber sobald ich den Faden wieder aufnehme. [...]
Kein Problem.
Denk' aber beim Nachbau daran, dass die referenzierten Dateien (Video + Standbild) in das Projekt Dateiverzeichnis "index_htm_files" gehören. Das macht der WD nicht automatisch, es sei denn, Du benutzt das Hilfsverzeichnis des Projekts und verschiebst die Dateien da hinein...
Ein Hilfsverzeichnis wird vom WD automatisch erstellt, wenn Du z. B. eine vorhandene Grafik (oder einen Platzhalter) durch eine extern gespeicherte Grafik ersetzt, das kann hier z. B. das Standbild "polina.jpg" sein.
Alternativ kannst Du das Hilfsverzeichnis manuell anlegen. Dazu erstellst Du in dem Verzeichnis, in dem die Projektdatei (z. B. "sitename.web") liegt, ein neues Verzeichnis. Das Verzeichnis muss den Namen des Projekts haben (hier "sitename"), erweitert um "_web_files".
Für unser Beispiel hat das Hilfsverzeichnis also den Namen "sitename_web_files".
Alle Dateien, die Du in dieses Verzeichnis kopierst, werden vom WD bei einem Export/Upload automatisch gelesen und in das Datei Verzeichnis "index_htm_files" kopiert.
Dort eventuell schon vorhandene Originaldateien werden dabei mit den Dateien aus dem Hilfsverzeichnis überschrieben!
Wenn Du die "Hilfsverzeichnis" Methode benutzt, musst Du dich also um die korrekte Organisation Deiner Scriptdateien nicht mehr kümmern, das macht dann der WD vollautomatisch.
Die Projektdatei "vidbackgr2.web", die Du heruntergeladen hast, bringt als Hilfsverzeichnis "vidbackgr2_web_files" mit. Bei einem Export der Demo werden also alle Dateien aus diesem Hilfsverzeichnis in das Projekt Dateiverzeichnis kopiert.
Noch Fragen? 😊
Lieber BeRo
Endlich hatte ich etwas Luft und habe mich daran gemacht. Dank deiner Hilfe hat das ziemlich gut geklappt und mein erstes eingebundenes Video läuft im Hintergrund meiner Seite.
www.klangkultur.ch
Herzlichen Dank und liebe Grüsse
Thomas
MoinMoin und nicht genervt sein, weil ich hier dieses alte Thema raus zieh, es passt einfach genau zu meinem Problemchen und muss darum nicht nochmal von vorne erklärt werden. ;)
Ich hab nun mit genau dieser Methode - und genau diesem Thread - mit dem WebDesigner Premium 17 ein Startvideo auf meine Homepage gezaubert. Nachdem die Befehle in head und body untergebracht sind, werd ichs da jetzt vermutlich kaum schaffen, dass dieses Video in der Version fürs Smartphone nicht auftaucht, oder? Erstens würde es ewig laden, zweitens wird es natürlich komplett falsch ausgegeben.
@Adi-Brugger
[...] werd ichs da jetzt vermutlich kaum schaffen, dass dieses Video in der Version fürs Smartphone nicht auftaucht [...]
Richtig. 🙂
Aber getreu dem Motto "Viele Wege führen nach Rom", benutzt Du einfach einen anderen Weg, um ein Video als Hintergrundvideo einzubinden.
Wenn Du das über einen Platzhalter machst, dann genügt es, diesen Platzhalter nur auf einer Seite der Variante einzubinden, auf der das Video zu sehen sein soll. In Deinem Fall ist das dann eben eine Seite der Desktop Variante.
Du musst nur darauf achten, dass der Platzhalter auf der Ebene "Page background" angelegt wird, damit das Video keine Layout Elemente der Seite verdeckt
Wie das genau funktioniert, das hat der Magix Support hier dokumentiert (klick).
Edit: 20:16 h
damit das Video in allen Browsern automatisch startet, muss das Video Tag noch ein bisschen angepasst werden, mit den Anweisungen "loop" und "muted".
So sieht das danach aus:
<div id="videobg"> <video class="xar_meplayer" src="index_htm_files/polina.mp4" loop autoplay muted width = "100%" height="100%"/> </div>
Der Name der Video Datei, hier "polina.mp4", ist natürlich wahlfrei.
Vielen, vielen Dank. Ok, da wär ich nicht drauf gekommen. ;)
Dann setz ich mich gleich mal ran und hau mir die Nacht um die Ohren. ;)
@Adi-Brugger
[...] werd ichs da jetzt vermutlich kaum schaffen, dass dieses Video in der Version fürs Smartphone nicht auftaucht [...]
Richtig. 🙂
Aber getreu dem Motto "Viele Wege führen nach Rom", benutzt Du einfach einen anderen Weg, um ein Video als Hintergrundvideo einzubinden.
Wenn Du das über einen Platzhalter machst, dann genügt es, diesen Platzhalter nur auf einer Seite der Variante einzubinden, auf der das Video zu sehen sein soll. In Deinem Fall ist das dann eben eine Seite der Desktop Variante.
Du musst nur darauf achten, dass der Platzhalter auf der Ebene "Page background" angelegt wird, damit das Video keine Layout Elemente der Seite verdeckt
Wie das genau funktioniert, das hat der Magix Support hier dokumentiert (klick).
Edit: 20:16 h
damit das Video in allen Browsern automatisch startet, muss das Video Tag noch ein bisschen angepasst werden, mit den Anweisungen "loop" und "muted".
So sieht das danach aus:<div id="videobg"> <video class="xar_meplayer" src="index_htm_files/polina.mp4" loop autoplay muted width = "100%" height="100%"/> </div>Der Name der Video Datei, hier "polina.mp4", ist natürlich wahlfrei.
Super, nochmal merci! Jetzt hab ich nur noch das Problem, dass das Hintergrundvideo links und rechts nicht komplett Bildfüllend ist. Habs mit diversen paddings im headtext probiert, aber es ändert sich nix. Was mach ich falsch? Ist eindeutig schon ne Weile her, als ich mich mit css beschäftigt hab. ;)
@Adi-Brugger
[...] Jetzt hab ich nur noch das Problem, dass das Hintergrundvideo links und rechts nicht komplett Bildfüllend ist.[...]
Du kannst im CSS Code die Angaben für "height" und "width" verändern und damit die Ausdehnung des Videos anpassen, z. B. so:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#videobg {
position: fixed;
z-index: 0;
top: 0px;
left: 0px;
height: 115%;
width: 115%;
opacity: 1;
overflow: hidden;
}
video{
position: absolute;
z-index: 0;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
}
</style>
Du kannst auch versuchen, das Seitenverhältnis des Video Originals zu verändern oder, je nach Video Thema, den Hintergrund des Videos manipulieren oder..., oder...
Schau Dir mal die online Demo an, die ich mit der o. a. Methode angepasst habe (klick). Das gezeigte Video passte ursprpünglich in der Höhe nicht perfekt.
Der Fantasie sind hier kaum Grenzen gesetzt. 🤓
Ja, soweit ist das schon klar. Es geht aber drum, dass das Video sich je nach Ausgabegröße des jeweiligen Browsers oder Bildschirms automatisch anpassen soll. Beim "Polina" Hintergrundvideo entsteht bei meinem Bildschirm links auch ein Rand. Bei der Variante die hier in diesem Thread als erstes genannt wurde, hat das super funktioniert. ;) Bloß bei der aktuellen jetzt nicht. ;)
[...] Beim "Polina" Hintergrundvideo entsteht bei meinem Bildschirm links auch ein Rand. [...]
OK, das passiert bei meinem Bildschirm auch, wenn ich die volle Größe benutze (2540 x 1440).
Abhilfe schafft die Änderung der "links" Position des Videos, hier z. B. auf den Wert "-100px".
Schau Dir die entsprechend geänderte Demo nochmal an (klick)
Wieder mal merci für deine schnelle Antwort und sorry dass ich jetzt erst antworte. Ärzte...
Werte bei "left" oder "right" ändern funktioniert bei mir leider auch nicht. Ist es möglich, dass das Seitenverhältnis des Hintergrundvideos gesperrt ist?
Beim Bild, welches ich über das Hintergrundvideo gelegt habe, funktioniert das mit der Vollbild Anzeige und es passt sich bildschirmfüllend an, wenn ich die Browserfenstergröße verändere.
In deinem Beispiel bleibt das Seitenverhältnis des Hintergrundvideos ebenfalls bestehen wenn man die Größe des Browserfensters ändert. Denke, ich werd mein Video jetzt einfach so verändern, dass es beim in Deutschland hauptsächlich genutzten Seitenverhältnis (16:9) ohne Balken angezeigt wird und mich damit abfinden, dass es eben anders nicht geht. Ist ja "nur" die Startseite, der Rest der Homepage ist "normal" ;)
Auf jeden Fall trotzdem vielen Dank für deine Hilfe, hast mir echt geholfen!
@Adi-Brugger
[...] ich werd mein Video jetzt einfach so verändern [...] und mich damit abfinden, dass es eben anders nicht geht. [...]
Vielleicht ist ja noch nicht alles verloren... 🤓
Die vom Magix Support vorgeschlagene Lösung ist, wie Du selbst gesehen hat, noch verbesserungswürdig.
Wenn man die Scriptcodes an die neuen CSS3 Möglichkeiten anpasst, sieht's schon sehr viel besser aus:
Das Video Tag muss noch erweitert werden um das Statement "playsinline", damit die Geräte aus der i-Family das Video nicht in einem neuen Tab öffnen:
<div id="videobg"> <video class="xar_meplayer" src="index_htm_files/polina.mp4" loop autoplay muted playsinline width = "100%" height="100%"/> </div>
Der CSS Scriptcode kann deutlich geschrumpft- und verbessert werden, z. B. so:
<style type="text/css">
#videobg {
z-index: 0;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 120%;
width: 120%;
min-height: 100vh; /* Mindesthöhe =100% der Viewport Höhe */
min-width: 177.77vh; /* Mindestbreite =177,77% der Viewport Höhe (für 16:9 Videos)*/
opacity: 1;
overflow: hidden;
}
</style>
Die Positionierung (Zentrierung) des Videos klappt damit immer und die Skalierung des Videos wird jetzt mit den Viewport Anpassungen (vh, vw, etc.) optimiert. Das passiert weitgehend unabhängig vom Seitenverhältnis des Browser Fensters...
Die im Beispielcode auf 120% veränderte Video Größe ist vom jeweils verwendeten Video abhängig. Mit dem Wert musst Du also ggf. experimentieren.
Schau dir das Ergebnis nochmal in der angepassten Demo an (klick).
Die dazu gehörende Projektdatei (WD17 prem) kannst Du hier herunterladen (klick).
Ja verdammt, wie genial!!! Vielen Dank, du bist mein Held des Jahres!!!
Wenn ich Bier oder Whisky durch die Leitung bekommen würde, würd ich dir jetzt einen ausgeben! ;) Vielen Dank!!!
[...] Wenn ich Bier oder Whisky durch die Leitung bekommen würde, würd ich dir jetzt einen ausgeben! [...]
Gerne, ein guter single malt, z.B. ein Glengoyne von 1999, wäre mir recht... 😋
Phuu... neverending Story.
Nachdem das bildschirmfüllende Hintergrundvideo jetzt überall super funktioniert hat, hab ich mit dem Rest der Seite weiter gemacht und bei den Webexporteinstellungen auf "Adaptive Seitenanpassung" gestellt.
Den IE stört das nicht großartig, aber Chrome und Edge machen aus dem bildschirmfüllenden HG-Video nun ein scrollbares, nicht mehr füllendes Video. Eigentlich soll nur der Inhalt im Vordergrund über den HG scrollen.
Hab mir jetzt das Wochenende den Kopf zerbrochen und mir überlegt, einfach die Index-Seite nicht adaptiv zu machen und die eigentliche Seite dann eben als neue, adaptive Seite in ein anderes Verzeichnis zu laden.
Oder gibts da doch noch nen Kniff? Sind Adaptiv- und Normaleinstellungen für unterschiedliche Seiten des selben Projekts möglich?
(Hab übrigens leider nur nen 12er Glengoyne Cask strength hier und kenn das Abfülldatum nicht. :) )
[...] Chrome und Edge machen aus dem bildschirmfüllenden HG-Video nun ein scrollbares, nicht mehr füllendes Video. [...]
Das sieht so aus, als würde die ID "videobg" nicht erkannt?! Dann müssen alle damit verbundenen CSS Anweisungen ins Leere laufen....
Die ID wird in dem DIV Tag vergeben, in dem das Video Tag liegt. Solltest Du das DIV Tag (und die ID) mehrfach im HTML Code haben, wäre das die Erklärung.
[...] Sind Adaptiv- und Normaleinstellungen für unterschiedliche Seiten des selben Projekts möglich? [...]
Nein, das wird nicht klappen. Du könntest allenfalls das Projekt in 2 Versionen splitten und die untereinander verlinken. Aber das wäre eine "Bastellösung", also nicht empfehlenswert.
[...] Hab übrigens leider nur nen 12er Glengoyne Cask strength hier [...]
Das ist ja schon mal ein guter Anfang... 😊
Hmm, ich hab ne komplett neue Seite gemacht um dem Problem auf den Grund und sicher zu gehen, dass nix anderes zwischenrein funkt.
Ich find da nix doppeltes oder störendes. Komisch, dass es erst dann nicht mehr funktioniert, wenn man die Seite auf "adaptive Seitenanpassung" stellt.
head:
<style type="text/css">
#videobg {
z-index: 0;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 120%;
width: 120%;
min-height: 100vh; /* Mindesthöhe =100% der Viewport Höhe */
min-width: 177,77vh; /* Mindestbreite =177,77% der Viewport Höhe (für 16:9 Videos)*/
opacity: 1;
overflow: hidden;
}
</style>
body:
<div id="videobg">
<video class="xar_meplayer" src="index_htm_files/startclip.mp4" loop autoplay muted playsinline width = "100%" height="100%"/>
</div>
[...] auf "Adaptive Seitenanpassung" gestellt. [...] Chrome und Edge machen aus dem bildschirmfüllenden HG-Video nun ein scrollbares, nicht mehr füllendes Video [...]
Ich hab' das gerade mal mit der Demo Datei nachgestellt.
Leider hast Du recht, die "fixieren" Option wird ausgehebelt und das Video kann in einigen Browsern gescrollt werden, wenn die Fensterhöhe zu gering wird...
Die Software Entwickler haben offenbar tief in die Trickkiste gegriffen, um eine fließende Anpassung des Seiteninhalts bei Größenänderungen des Browser Fensters zu erreichen. Die Vorgaben aus dem CSS Script, das wir zusätzlich eingefügt haben, werden dabei, abhängig vom verwendeten Browser, teilweise ignoriert und das ist scheinbar auch nicht zu umgehen. 😦
Wenn Du die adaptive Seitenanpassung verwenden willst, bleibt Dir IMHO wohl nur die o. a. "Bastellösung" mit der Aufteilung des Projekts in eine Startseite ohne adaptive Anpassung und die restlichen Seiten mit Anpassung.
Alternativ kannst Du natürlich auch die ursprüngliche, vom Threaderstelleer @TonTom erfragte Lösung probieren, die für alle Varianten ein Hintergrundvideo bereitstellt. Die funktioniert auch mit "adaptive Anpassung"... 🤓
Vielen Dank wieder mal. So ähnlich hab ich mir das schon gedacht.
Aktuell bin ich an der Bastellösung. Hab das mit der ursprünglichen Lösung von hier weiter oben auch schon probiert, da gabs dann das Problem mit den Rändern. Und ich möchte das Video nicht auf der Smartphone- und Tabletvariante. Sieht Hochkant nicht gut aus. ;)
Auf meiner Startseite gibts nur zwei Links. Einen für Besucher, der führt zur eigentlichen Seite und einen für ungebetene Gäste, der führt woanders hin. ;) So eine große Bastelei wird das also nicht. Werd von der Startseite einfach auf ein anderes Verzeichnis verlinken. ;) Die Startseite wird eh nie großartig geändert werden, also alles halb so schlimm. ;)
Das mit dem Glengoyne ist übrigens ernst gemeint, wir müssten uns dann bloß mal irgendwo übern Weg laufen. :P
[...] Aktuell bin ich an der Bastellösung [...]
OK, das wird funktionieren.
[...] Das mit dem Glengoyne ist übrigens ernst gemeint [...]
Ein ernst gemeinter Verführungsversuch zum Genuss von Alkohol? Und das mir, als Minderjährigem, das kann nicht gut gehen... 👮😀