Darstellungsproblem bei responsiven ce_youtube

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:

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;
}

---

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.
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

Zitat:

---

Zitat von derRenner

Bisher, auch in diesem Projekt, setze ich für responsive Videos dieses CSS ein:

Code:

---

.ce_youtube {
        position: relative;
        padding-bottom: 56.25%;
        width: 100%;
        height: auto;
}

---

---

Damit gibst du ja dem gesamten Container ein padding-bottom - noch dazu abhängig von der Breite des Parents. Du solltest dieses 16:9 padding eher dem .video_container geben.

nein, das ist es nicht - siehe aktuellen Stand
ich habe nun jeweils .ce_youtube .video_container angesprochen » selbes Verhalten, sowohl auf der Start- als auf der Referenzseite

Gib dem Container height: 0; statt auto.

Zitat:

---

Zitat von derRenner

nein, das ist es nicht - siehe aktuellen Stand

---

Dort steht aktuell immer noch folgendes:

Code:

---

.ce_youtube {
  position: relative;
  padding-bottom: 56.25%;
  width: 100%;
  height: auto;
}

---

Nein ... ggf. F5 Browsercache erneuern

Code:

---

ce_youtube .video_container {
  position: relative;
  padding-bottom: 56.25%;
  width: 100%;
  height: auto;
}

---

Jetzt fehlt noch die height: 0; statt height: auto; Änderung :)

ja, soeben auch noch über stackoverflow eruiert ...

und es hat auch noch das overflow: hidden; gebraucht, da sich sonst das umschliessende div und das <p>back ineineander verschoben hätten.

sieht nun so aus:

Code:

---

.ce_youtube .video_container {
        position: relative;
        padding-bottom: 56.25%;
        width: 100%;
        height: 0;
        overflow: hidden;
}

---

Danke dir auf alle Fälle für die Hilfstellung!