Video Background

**X0lfm4n**

es geht dabei auch um selbst erstellte seiten welche teil als HTML teils als Text Seiten erstellt werden

die videos sollen im hintergrund laufen also nicht im content bereich

PurpleDarkness59

das die Videos im Hintergrund und nicht im Content dargestellt werden sollen habe ich schon verstanden

Dafür sollten die eigenen Seiten jedoch im HTML-Modus erstellt werden, um dieses zu verwirklichen. Wie ein Video eingebunden wird, wurde hier ja bereits genannt. Letztlich genau so, wie Du dies auf Deiner Startseite (Dashboard) bereits schon getan hast, nur dass hier das Video eben auf einer eigenen Seite eingebunden werden würde. Vom Quellcode her tut sich da abseits der URL zum Video nichts.

Gruss,
Andreas

**X0lfm4n**

ah ok verstehe, dann schau ich mir das mal an und melde mich ggf. nochmal

vielen dank erst einmal

**X0lfm4n**

hab erst mal das problem das video was ich bereits drin habe das das auf den neuen seiten nicht abgespielt wird sondern das neue

PurpleDarkness59

X0lfm4n

entschuldige, aber um ehrlich zu sein verstehe ich nur Bahnhof

Es ist ein Video drin, aber es wird auf den neuen Seiten nicht angezeigt, sondern das neue? Relativ unverständlich auf was Du da hinaus bist. Sorry.

Gruss,
Andreas

**X0lfm4n**

Also @Belarus :

ich habe den CSS in der Styleunabhängigen:

CSS

#pageContainer .wrapper-global-background-video {
 position: fixed;
 top: 0;
 left: 0; /* 0 ori */
 width: 100%;
 z-index: 0;
 padding: 0;/*margin-top: -26px;*/
}
#pageHeaderContainer {
 z-index: 100;
}
.top_registerbox {
 z-index: 1;
}
.pageFooterStickyNotice, #pageHeader {
 z-index: 999;
}
.dropdownMenuContainer {
 z-index: 999;
}
.balloonTooltip {
 z-index: 999!important;
}
.main {
z-index: 999;
}
.pageNavigation {
z-index: 1;
}
.boxesFooterBoxes {
z-index: 998;
}
#pageFooter {
z-index: 998;
}
#UserXtraboxContainer {
    background-color: transparent;
    padding: 0px;
    margin-top: -254px;
}

Alles anzeigen

Und das:

Code

<div class="videoloop" style="position: fixed; z-index: -99; width: 100%; height: 100%">
    <video playsinline autoplay muted loop poster="../images/style-5/pageBG.jpg" id="videoBackground">
        <source src="../files/videos/hintergrund/background.webm" type="video/mp4">
        <source src="../files/videos/hintergrund/background.mp4" type="video/mp4">
        <source src="../files/videos/hintergrund/background.mov" type="video/quicktime">
    </video>
</div>
<div id="video_pattern"></div>

unter ACP - Konfiguration - Allgemein - Seite - Head Code drin stehen.

Dadurch wird dieses Video auf den neuen Seiten ebenfalls angezeigt was es aber nicht soll.

Da die neuen Seiten Themen Bezogen sind soll auf den Seiten je ein separates Video angezeigt werden, aber das Video oben soll bleiben.

PurpleDarkness59

X0lfm4n

nun ist es verständlicher

Wenn Du ein Background-Video im ACP im Head-Code einbindest, dann ist natürlich auch klar, dass dieses auf jeder x-beliebigen Seite auftauchen wird. Um unterschiedliche Videos auf diversen Seiten einzufügen, bedarf es dazu, dass diese auch auf jeder gewünschten Seite manuell eingebunden werden. Über die Umsetzung kann man sich hier aber streiten. Ungetestet aber hier einmal ein paar Grundsätzliche Gedanken dazu:

Einerseits könnte man eine jede Seite (gleichermaßen ob nun App oder eigene Seite) manuell anpassen oder aber ein öffnenden Wrapper im Header-Template platzieren und des gleichen im Footer-Template schließen. Im folgenden könnte dann per data-page-identifier und der Wrapper-ID / Klasse ein Video per CSS-Deklaration background oder content eingebunden werden.
Abseits dessen könnte auch jede gewünschte Seite manuell bearbeitet werden. Dazu müsste jedoch in jeden Template der gewünschten Seite(n) eingegriffen und der Video-Quellcode eingebunden werden. Auch dabei muss das Video dann per CSS natürlich angepasst werden.

Gleichermaßen wie man dieses umsetzen möchte, muss natürlich der Quellcode von Dir aus dem Head-Code raus. Andernfalls wird dies nicht funktionieren, da der Head-Code vorrangig ist. Bedeutet, dass andere Videos dann von dem im Head-Code überlappt werden würden, welches nicht nur dazu führen würde, dass nur das Video im Head-Code zu sehen wäre, sondern sowohl das eine und das andere geladen werden würde: Erfolg = Lange Ladezeit(en)!

[info='warning']Das unachtsame bearbeiten von Templates kann zu einen Fatal-Error führen. Entsprechend dem sollten Templates nur mit Erfahrung(en) bearbeitet werden und zudem natürlich immer stets ein Backup gemacht werden. Wer diesen nicht gewachsen ist, sollte ein Entwickler des Vertrauens aufsuchen![/info]

Ein paar kleine Anmerkungen zum Video-Background ...

object-fit: cover; im Video-Tag, füllt das Eltern-Element (Beispiel ein DIV) mit dem Video.
Benutze statt %-Angaben besser vh / vw (Viewport high / width)
Beispiel: height: 100vh; width: 100vw;
poster="MEIN_BILD" im Video-Tag zeigt ein Hintergrundbild bis das Video geladen und abgespielt wird.
Videos immer in mehreren Formaten anbieten (u.a. ".mp4" ; ".ogg"; ".webm") um alle Browser bedienen zu können. Andererseits kann es sein, dass Benutzer oder Gäste mit älteren bzw. exotischen Browsern (auch wenn diese nur ein Bruchteil ausmachen) kein Video angezeigt wird.
Komprimierung der Video-Backgrounds um lange Ladezeiten zu vermeiden. Für solches gibt es z.B. Online-Converter wie in vorherigen Beiträgen genannt wurde.
Innerhalb des Video-Tags sollte im Falle eines Falles auf das nicht unterstützen des Video-Tags hingewiesen werden. Beispiel: <video><source src="MEIN_VIDEO">Your browser does not support the video tag.</video>. Dies würde dann den Benutzer im Falle eines Falles angezeigt werden, wenn der Video-Tag seitens des Browsers nicht unterstützt wird. Wird jedoch wie unter Punkt 3 genannt auf das poster="MEIN_BILD" zugegriffen, so würde dieses den Schriftzug überdecken.

Gruss,
Andreas

Video Background

Jetzt mitmachen!

Benutzer online in diesem Thema

Gast

Unserer Forum

Empfehlungen

Social/Media

Forum online seit...

Datenschutzeinstellungen