Hallo,
ich habe hier ein CSS-Problem, das ich nicht verstehe warum es auftritt bzw. wo ich zu einer Lösung ansetzen soll.
Bisher, auch in diesem Projekt, setze ich für responsive Videos dieses CSS ein:
Die Youtube Videos sind mit Vorschaubild integriert. Und nun passiert hier, dass es auch tatsächlich ein padding-bottom dargestellt wird » aber nur solange das Vorschaubild vorhanden ist. Klicke auch drauf und das YT-Video öffnet sich, dann passt wieder alles.Code:.ce_youtube { position: relative; padding-bottom: 56.25%; width: 100%; height: auto; } .ce_youtube iframe { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%!important; height: 100%!important; }
So, aber dies passiert nicht überall
Hier geht's zum Projekt - noch auf einer Subdomain bei Netcup ... Ladezeiten daher Katastrophe
Hier auf der Startseite beim Anker (Video Showreel 2020) funktioniert es deshalb weil ich für dieses Element ein padding-bottom: 0; verbaut habe.
Verbaue ich das padding-bottom: 0; auch bei anderen Youtube-Elementen, dann passt zwar das Vorschaubild (erscheint dann ohne padding), aber beim Klick, also wenn das Youtube Video gezeigt wird, hat dieses eine Höhe von Null. Hier zum Vergleich.
Entweder sehe ich den Wald vor lauter Bäumen nicht, oder ...
Freue mich auf Hilfestellung
Lesezeichen