Contao-Camp 2024
Ergebnis 1 bis 7 von 7

Thema: Inhalte Youtube auf 100% Seitenbreite skalieren

  1. #1
    Contao-Nutzer
    Registriert seit
    24.10.2019.
    Beiträge
    14

    Standard Inhalte Youtube auf 100% Seitenbreite skalieren

    Liebe Community,
    wir sind mit der Seite auf Contao 4.4 umgestiegen und haben gleich mit mehrere Problemchen mit Layoutdefinition etwas zu kämpfen gehabt.
    Was noch zu lösen bleibt:
    Die Youtube-verlinkten Inhalten werden mit fixe (vekleinerte) Größe angezeigt. Leider hilft hier auch nicht die Definition über das Modul selber von Min oder Max-Größe, da diese (zumindest in Chrome) nicht wahrgenommen werden.
    Ich möchte dass die Inhalte auf 100% der Spaltenbreite skaliert werden, damit auch Handy und Tablet diese richtig visualisieren können. Fixe Größe ist keine gute Lösung dafür.

    Hat jemand eine Idee, wie man die Skalierung auf 100% der Spaltenbreite wirklich realisiert? So dass es funktioniert?

    Vielen Dank!
    Geändert von miamanu71 (25.10.2019 um 11:44 Uhr)

  2. #2
    Contao-Nutzer Avatar von hinzke
    Registriert seit
    05.02.2014.
    Beiträge
    175
    Partner-ID
    10356
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ist es das was du suchst?

    CSS:

    HTML-Code:
    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
    }
     
    .video-container iframe,
    .video-container object,
    .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    Html:
    HTML-Code:
    <div class="video-container"><iframe width="853" height="480" src="[yt-link]" frameborder="0" allowfullscreen</iframe></div>

  3. #3
    Contao-Nutzer
    Registriert seit
    24.10.2019.
    Beiträge
    14

    Staunendes Gesicht Deine Version funktioniert sehr gut

    Vielen Dank dafür!
    Zwar muss ich dann auf das Youtube-Modul verzichten aber mit HTML Code geht ja auch!
    Danke dir.

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

    Zitat Zitat von miamanu71 Beitrag anzeigen
    Zwar muss ich dann auf das Youtube-Modul verzichten aber mit HTML Code geht ja auch!
    Nein, verzichten musst du nicht.
    Du kannst ja das Youttube-template anpassen und/oder zusätzliches CSS einsetzen, damit du mit dem Standard-Modul arbeiten kannst
    Grüsse
    Bernhard


  5. #5
    Contao-Nutzer Avatar von hinzke
    Registriert seit
    05.02.2014.
    Beiträge
    175
    Partner-ID
    10356
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Das hier ist der von Contao generierte HTML-Code bei Nutzung des YouTube-Inhaltselement, damit läuft doch das doch dann Responsive mit dem CSS den ich oben gepostet hab

    HTML-Code:
    <figure class="video_container">
    <iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/XXX?modestbranding=1&amp;rel=0&amp;showinfo=0" allowfullscreen></iframe>
    </figure>

  6. #6
    Contao-Nutzer
    Registriert seit
    24.10.2019.
    Beiträge
    14

    Standard Vielen Dank

    Das ist wirklich super, funktioniert bestens. Danke euch!

  7. #7
    Contao-Nutzer
    Registriert seit
    28.03.2010.
    Ort
    Tübingen
    Beiträge
    114

    Standard YouTube responsive mit Contao - kleine CSS Korrektur

    Kleine Korrektur: Statt eines Bindestriches, verwendet Contao (zumindest in Version 4.9) bei den Klassen einen Unterstrich.
    Das CSS sieht also Copy/Paste-fertig so aus:

    Code:
    .video_container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
    }
    
    
    .video_container iframe,
    .video_container object,
    .video_container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

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
  •