Contao-Camp 2024
Ergebnis 1 bis 8 von 8

Thema: Youtube Iframe responsive einbinden

  1. #1
    Contao-Fan
    Registriert seit
    10.01.2012.
    Beiträge
    388

    Standard Youtube Iframe responsive einbinden

    Hallo,

    ich versuche gerade einen Youtube Player responsive zu gestalten:

    https://www.hfn-media.net/filmproduktion_karlsruhe.html

    Auf einem Desktop sieht es noch OK aus, auf einem Handy wird nur der mittlere Teil angezeigt.

    Hat jemand eine Idee, wie ich den Player weiter optimieren kann?
    Er sollte halt überall mit dem korrekten 16:9-er Seitenverhältnis angezeigt werden:

    Das Video wurde durch einen Contao Youtube-Player integriert und dies ist der CSS-Code:

    .ce_youtube iframe {

    width:100% !important;
    height:100%
    position: absolute;
    top: 0;
    left: 0;

    }

    Vielen Dank für euren Ratschläge.

    Gr. I.

  2. #2
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    6.463
    Partner-ID
    107
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Schau mal hier:
    https://css-tricks.com/fluid-width-video/

    In Contao 4.9 kann man das dann auch im YT-Inhaltselement einstellen.
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao-Sprechstunde
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    Schon wieder ein Update?
    Glücklich sind die, die den Wert erkennen – und wertschätzen.
    „Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”

  3. #3
    Contao-Fan
    Registriert seit
    10.01.2012.
    Beiträge
    388

    Standard

    Vielen Dank!

    Diese Installation ist leider noch 4.4.X
    Besteht hier die Möglichkeit ein Youtube-Player so einzubetten, dass das 16:9 Seitenverhältnis auf allen Endgeräten korrekt dargestellt wird?

    Gr. I.

  4. #4
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    6.463
    Partner-ID
    107
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ja, mit CSS wie im Artikel von CSS Tricks beschrieben.

    Es gibt auch deutschsprachige Seiten. Suche nach „(YouTube) Videos responsive”.
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao-Sprechstunde
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    Schon wieder ein Update?
    Glücklich sind die, die den Wert erkennen – und wertschätzen.
    „Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”

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

    Support Contao
    Grüsse
    Bernhard


  6. #6
    Contao-Fan
    Registriert seit
    10.01.2012.
    Beiträge
    388

    Standard

    Vielen Dank, es hat gut funktioniert!

    LG

    I.

  7. #7
    Contao-Nutzer
    Registriert seit
    13.01.2012.
    Ort
    Ludwigsburg
    Beiträge
    70
    Partner-ID
    11284
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Die Variante, die Planepix beschrieben hat, funktioniert auch, wenn man mehrere Videos untereinander setzen will.

    CSS-Code für Contao angepasst:

    .ce_youtube {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    }
    .ce_youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

  8. #8
    Contao-Fan Avatar von mdoll
    Registriert seit
    25.06.2009.
    Ort
    Wietze
    Beiträge
    333

    Standard

    Moin,

    wer den IE nicht mehr unterstützen muss, kann auch aspect-ratio verwenden. 2 weitere Zeilen begrenzen die maximale Breite des Players und zentrieren ihn horizontal.

    Code:
    .video_container {
        position: relative;
        aspect-ratio: 16 / 9;
        width: min(100vw, 40rem); /* limit the player width to 40rem */
        margin-inline: auto; /* horizontal centering */
    }
    .video_container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    Browserunterstützung aspect-ratio: https://caniuse.com/mdn-css_properties_aspect-ratio
    Browserunterstützung margin-inline: https://caniuse.com/mdn-css_properties_margin-inline
    Browserunterstützung min(): https://caniuse.com/css-math-functions

    Gruß
    Mathias
    “Ah," said Mr Pin. "Right. I remember. You are concerned citizens." He knew about concerned citizens. Wherever they were, they all spoke the same private language, where 'traditional values' meant 'hang someone'.”
    ― Terry Pratchett, The Truth

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
  •