Guten Abend,
ich möchte gerne auf einer Startseite einen Film im Hintergrund laufen lassen -
welches Format sollte der Film haben?
Binde ich den Film genauso ein, wie ein Hintergrund Bild?
Beste Grüße
Tilda
Druckbare Version
Guten Abend,
ich möchte gerne auf einer Startseite einen Film im Hintergrund laufen lassen -
welches Format sollte der Film haben?
Binde ich den Film genauso ein, wie ein Hintergrund Bild?
Beste Grüße
Tilda
Nein, ein Hintergrundbild kannst du mit CSS einbinden, ein Video nicht.
Versuche das Format mp4 mit Audio acc.
Du kannst ein normales VIDEO-Tag einbinden, also ohne js_mediaelement. Verwende nicht das Attribute CONTROLS. Setze ein POSTER als Fallback-Bild.
Du kannst das VIDEO irgendwo einbinden, im Footer oder Header z.B. Das CSS könnte so aussehen:
PHP-Code:video.bg {
position: fixed;
width: auto;
height: auto;
left: 50%;
top: 50%;
min-width: 100%; /* oder 100vw */
min-height: 100%; /* oder 100vh */
transform: translate(-50%, -50%);
background-image: url(files/css-video-fallback-hintergrund.jpg);
background-size: cover;
z-index: -1;
}
Nette Links bzgl. Hintergrund-Videos: http://vodkabears.github.io/vide/ und http://www.coverr.co/
Vide kann ich nur empfehlen ...
Hier noch ein Link zu meiner Lösung http://thenewcode.com/777/Create-Ful...ckground-Video. Lies auch die interessanten Hinweise unter "Considerations and Limitations".
Danke schön! Da schaue ich mal!
Beste Grüße
Tilda
Hallo Zusammen,
mir ist noch nicht so ganz klar, welche Größe, bzw. welches Seitenverhältnis der Film haben sollte.
Im Netz habe ich jetzt dies gefunden.
https://www.webmalama.com/the-best-f...or-web-design/
mit folgenden Beispielen:
1920 x 1165 –1.65 ratio– Zara Clothing
2560 x 1707 –1.5 ratio– Burberry
Den Film, den ich gerne im Hintergrund laufen lassen möchte, kommt aus einer 3-D Animation,
und da stellen sich nun viele Fragen:
- Wie groß darf die Datei maximal?
- Läuft der Film direkt los, oder ist es sinnvoller, dass man den Film starten muss?
- Welche Größe ist notwendig, damit es nicht zu allzugroßen Qualitätsverlusten kommt?
Beste Grüße
Tilda
Funktioniert es eigentlich, wenn ich den Film üebr Vimeo lade und dann den Link des Videos einbinde?
Dann müsste ich doch die Ladezeit im Griff haben, oder?
Größe:
Ich würde das Video im Format 16:10 zB 1920x1200 oder 16:9 zB 1920x1080 anfertigen.
Bei Vollbildanwendung im Landscape-Format wird dann entweder ein Teil rechts und links, oder oben und unten abgeschnitten. Ohne Vollbildanwendung kann man nicht wissen, wie groß der Vieport im Browser eingestellt ist.
Versuche das Video so klein wie möglich zu halten. Evtl. b&w. Ohne Tonspur. Ausprobieren, ob es noch gut aussieht, wenn ein kleines Video zB 320x200 auf 1920 aufgezogen wird. Kurze Videolänge.
Besteht die Zielgruppe aus Smartphone-Besuchern, dann ein Video im Portrait-Format anfertigen. Soll es gleichzeitig auf dem Desktop angezeigt werden, sollte es noch gut aussehen, wenn die Bereiche oben und unten abgeschnitten werden.
Wenn das Video zu groß ist, dann besser nicht auf der Startseite präsentieren, weil du damit ja jeden Besucher erstmal dazu zwingst dieses Video herunterzuladen.
Autoplay auf Smartphones ist soviel ich weiß nicht möglich, also für ein "Poster" als Fallback sorgen.
Vimeo:
Ausprobieren.
Edit: Ladezeit im Griff? Für den Besucher ist es kein Unterschied, ob der Browser das Video von deinem Server, oder einem Anbieter lädt. Es sei denn, der Anbieter hat gute Streaming-Settings. Und die Geschwindigkeit eines Anbieters könnte kleiner|größer als die deines Servers sein.
Vielen Dank für die umfangreichen Info's -
dann starte ich nun mal -
Das Filmchen läuft - responsive - alles wunderbar...
Allerdings:
Ich habe mich genau an die Schritte im contaowiki gehalten.
http://de.contaowiki.org/Hintergrund_Video
Da musste man die fe_page Datei um diese Zeile erweitern, um die Vollflächigkeit des Filmes zu bekommen.
Nun habe ich aber das Problem, dass mir diese kleine Zeile in der Datei, die Folgeseiten zerhaut,HTML-Code:<div id="bgvideo">{{insert_module::hintergrund_video}}</div>
dort kein Menü mehr anzeigt, wenn es Inhalte gibt. Und die Inhalte gedoppelt erscheinen.
Wenn es keine Inhalte gibt, ist immerhin das Menü zu sehen
Was kann man denn da tun?
Beste Grüße
Tilda
Der erste Satz in dem Wiki ist leider schon falsch. Mache es so, wie oben in Post #2 beschrieben.
Du kannst sowohl ein CE Typ Video, oder ein Youtube-Video mit [youtube_iframe] per CSS als Hintergrundvideo einrichten. An welcher Stelle das Element im Quellcode steht ist nicht so wichtig.
Seitenweites Einbinden von Artikeln oder Elementen (falls du das brauchst) macht man mit einem Modul Typ HTML und Inserttags. Beispiel:
HTML-Code:<!-- indexer::stop -->
<div class="mod_article block my-class">
{{insert_article::my-article-alias}}
oder
{{insert_content::42}} 42 ist die ID eines CEs
</div>
<!-- indexer::continue -->
schade, dass es falsch war -
ich habe es jetzt so eingebunden, wie on dir unter dem Post#2 beschrieben ist,
das funktioniert auch gut - aber wie bekomme ich da einen Loop eingestellt?
Beste Grüße
Tilda
Über ne Template-Anpassung ce_player => ce_player_loop. 'loop' hinter 'controls' setzen. Siehe auch hier https://www.w3schools.com/tags/att_video_loop.asp
Danke jetzt habe ich es ! :)
Hi Leute,
wie lässt sich ein Video als Fullpage-Hintergrund-Video in Contao 4 einbinden und was muß man beachten, damit die Ladezeit auf Desktop und Mobile nicht ausufert?
Das Video ist im Format mp4, 1280x720, und beträgt 16,4MB. Die Länge sind 19 Sekunden.
Wie muß man das Video bearbeiten oder umwandeln?
Sollte das Video für MOBILE zusätzlich in einem kleineren Format ( 320x240) erstellt werden und dann per Media-Query eingebunden werden?
Hi
Folgendes kannst Du machen:
Die Erweiterung von codefog.pl (Revolution Slider) benutzen (allerdings nicht günstig)
49€ die Erweiterung
16 Dollar & 49 Dollar das jQuery Script und der Visual Editor
kaufen, dann sollte das Problem behoben sein
(vielleicht wäre das was für Dich)
Gesendet von iPhone mit Tapatalk Pro
Warum ändert dann keiner das Wiki???:mad:Zitat:
Zitat von Andreas
Ich selber habe es versucht, es dürfen nur Administratoren ran...:(
Das Wiki ist mindestens in Teilen hoffnungslos veraltet. Es hat davon gelebt/lebt davon, dass sich jemand in der Community dazu aufrafft und die Aktualisierung vornimmt. Im Grunde könntest auch Du das jetzt anpassen, wenn ich es richtig in Erinnerung habe.
Andererseits haben wir jetzt die neue Doku https://docs.contao.org/manual/de/
Ich weiß nicht ob das ein Thema für die Doku wäre oder in wie weit es sinnvoll ist Teile des Wikis in einem zusätzlichen Bereich aufzunehmen.
Allerdings weiss ich, dass jeder eingeladen ist an der Dokumentation mitzuarbeiten. ;)
Ich konnte mich früher ganz normal registrieren. Jetzt finde ich auf der Startseite einen Hinweis zur Möglichkeit der Regisrierung https://de.contaowiki.org/HauptseiteZitat:
Zitat von Ernestopheles
Nachdem ich lange per try and error rumprobiert habe und diverse Artikel in der Contao Doku gelesen habe, habe ich einen Weg gefunden, den ich hier beschreiben möchte:
1. Damit das Video im Hintergrund läuft (wir zwingen es hinter die nachfolgenden html Elemente), legen wir außerhalb des Backends eine stylesheet-Datei bg.css an mit diesem Inhalt:
Diese importieren wir in unser theme, das wir für unsere website verwenden.Code:.bg video {
position: fixed;
width: auto;
height: auto;
left: 50%;
top: 50%;
min-width: 100%; /* oder 100vw */
min-height: 100%; /* oder 100vh */
transform: translate(-50%, -50%);
z-index: -1;
}
2. Wir erstellen in diesem theme ein Layout, in welchem wir das interne stylesheet bg ankreuzen.
3. Die Seite, auf der das Hintergrundvideo laufen soll, bekommt dieses Layout zugeordnet. Bei mir ist das die Startseite. (Die anderen Seiten bekommen ein anderes Layout ohne das interne stylesheet).
4. Auf der Startseite (Layout ist bei mir einspaltig) platzieren wir als Inhaltselemente:
- ein Video, dem wir die CSS-Klasse bg zuordnen
- andere HTML-Elemente, bei mir für den Test ein Text
5. Die Vorschau zeigt den Text vor dem Video. Wie gewünscht.
Anmerkungen: Mit dem selector video.bg funktioniert es bei mir nicht. Wie der HTML-Code der Vorschau zeigt, wirkt die Anweisung class="bg" nämlich nicht direkt auf das Video-Element, sondern auf das übergeordnete Blockelement (div), in dem dann ein figure tag folgt welches das video einbettet. "video.bg" wirkt nur, wenn es direkt im <video> tag steht. Während .bg auf alle möglichen HTML Elemente inclusive der darin eingeschlossenen wirkt.
Einen Fallback für den Fall, dass das Video nicht geladen werden kann, braucht man nicht im CSS anlegen, da man im Video-Inhaltselement ein Vorschaubild angeben kann. Dies sollte die gleiche Funktion haben, vermute ich mal.
Geholfen hat mir vor allem dieser Artikel: http://thenewcode.com/777/Create-Ful...ckground-Video
Danke für Deine Zusammenfassung.
Ein paar Fragen dazu:
- Wozu dient background-size: cover;? Es gibt hier doch kein Hintergrundbild (im technischschen Sinn). Könnte das also nicht entfallen?
- Da -- wie Du in Deine Anmerkungen erklärst der Selektor bg.video nicht greift, wie sieht es dann mit .bg video aus?
- Hast Du einen Link für uns?
Ja, das stimmt.Zitat:
Zitat von fiedsch
Einen Link kann ich erst schicken, wenn die Startseite soweit fertig und im Verein abgestimmt ist. Mach ich dann gerne.
.bg video funktioniert
Danke dir für deine Hinweise.