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!

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>

---

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

Zitat:

---

Zitat von miamanu71

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

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>

---

Das ist wirklich super, funktioniert bestens. Danke euch!

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

---