Full Page js - Video Background - Mac & Chrome Fehler! - gelöst

Hallo Zusammen,

ich habe mit dem Full Page Template von alvarotrigo eine kleine Seite gebaut. Das klappt alles soweit ganz gut.

Nur habe ich das Problem, dass wenn man im Chrome-Browser das Video auf Seite 4 startet, dieses über die anderen Seiten ( 3 und 5 ) überlappt, wenn man weiter scrollen will.

Man muss dann die Seite neu laden, damit alles wieder an seinem Platz ist.

Ich vermute es hat was mit dem z-index zu tun. Komme aber nicht weiter.

Am besten mal selber ausprobieren: Testseite

Bei Firefox und Safari ist das nicht der Fall. Nur im Chrome gibt es dieses Problem.

Danke

Cheers

Flo

Hi Sempervivum,

danke für Deine Antwort. Wenn Du bis zum Video scrollst und dann das Video startest und dann aber wieder hoch scrollst, hast Du keine Überlappung des Videos über dem Inhalt der vorherigen Seite ( "Sunny Mind" ) ?

Anbei ein paar Screenshots. Der letzte Screenshot ist so wie es sein sollte.

Danke. Cheers

Flo

html-seminar.de/woltlab/attachment/1695/

html-seminar.de/woltlab/attachment/1696/html-seminar.de/woltlab/attachment/1697/

Hi Stef,

ich teste die Seite mit folgenden Browsern:

Chrome - Version 70.0.3538.67 - Überlappung / Fehlerhafte Darstellung

Firefox - Version 62.0.3 (64-Bit) - Alles ok.

Safari - Version 12.0 (13606.2.11) - Alles ok.

System: MacOS High Sierra 10.13.6 auf einem Macbook Pro Retina 15"

Vielleicht liegt es auch an dem Seitenverhältnis ? Vielleicht hat Chrome Probleme damit.

Wenn ich das Browser-Fenster in der Größe ändere , passt sich normaler weise der Seiteninhalt an und bleibt im Fullscreen. Nur bei dem Video geht es nicht. Zumindest beim Chrome-Browser.

ich denke es liegt an dem "object-fit: cover". Bei "fill" bleibt der Inhalt des Videos in der Section. Bei "cover" überlappt das Video die anderen Sections oben und unten.

GELÖST! Es handelt sich um ein spezielles Problem mit Chrome und MacOS.

/solves problem with overflowing video in Mac with Chrome /

/#section0{

overflow: hidden;

}/