Contao-Camp 2024
Ergebnis 1 bis 8 von 8

Thema: Darstellungsproblem bei responsiven ce_youtube

  1. #1
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard 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
    Grüsse
    Bernhard


  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.898
    Partner-ID
    10107

    Standard

    Zitat Zitat von derRenner Beitrag anzeigen
    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.
    » sponsor me via GitHub or PayPal or Revolut

  3. #3
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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
    Grüsse
    Bernhard


  4. #4
    Contao-Fan
    Registriert seit
    03.01.2012.
    Beiträge
    809

    Standard

    Gib dem Container height: 0; statt auto.

  5. #5
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.898
    Partner-ID
    10107

    Standard

    Zitat Zitat von derRenner Beitrag anzeigen
    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;
    }
    » sponsor me via GitHub or PayPal or Revolut

  6. #6
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Nein ... ggf. F5 Browsercache erneuern

    Code:
    ce_youtube .video_container {
      position: relative;
      padding-bottom: 56.25%;
      width: 100%;
      height: auto;
    }
    Grüsse
    Bernhard


  7. #7
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.898
    Partner-ID
    10107

    Standard

    Jetzt fehlt noch die height: 0; statt height: auto; Änderung
    » sponsor me via GitHub or PayPal or Revolut

  8. #8
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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!
    Grüsse
    Bernhard


Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •