YouTube-Video einbetten mit maximaler Breite bzw. Höhe

[LeanderAT]

Hallo!

Ich würde gern ein YouTube-Video einbetten. Dafür gibt es z.B. https://embedresponsively.com/

Wenn ich das einbaue, funktioniert es, aber das Video ist zu hoch für meine Seite. Vorher hatte ich einen Code mit Höhe und Breite, aber mobil führte das zu einem Problem mit Scrollbalken. Bzw. das Padding funktioniert bei mir, sobald ich Höhe und Breite ändern will, auch nicht.

Wie kann ich den oberen Code anpassen, dass ein Video mit maximaler Breite x und maximale Höhe y angezeigt wird? Kann mir da bitte jemand helfen?

 

[Enurian]

Der Teil "padding-bottom: 56.25%" steuert die Höhe.

Wenn dein Ziel ist, die maximale Höhe explizit festzulegen, kann man das besser aufziehen, z.B. müsste es so gehen:

.embed-container {
  --max-h: 320px;
  aspect-ratio: 16 / 9;
  width: min(100%, calc(var(--max-h) * 16 / 9));
}
.embed-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

 

[LeanderAT]

Funktioniert, super, vielen Dank!

PS Wenn ich den Code in meine CSS reinkopiere, dann 1:1 und in die PHP-Datei

<div class="embed-container"><iframe src="youtubelinkblabla" frameborder="0" allowfullscreen></iframe></div>

oder muss ich auch was mit div style machen?

Also CSS:

.embed-container {
  --max-h: 410px;
  aspect-ratio: 16 / 9;
  width: min(100%, calc(var(--max-h) * 16 / 9));
}

.embed-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

und PHP

<div class="embed-container"><iframe src="youtubelinkblabla" frameborder="0" allowfullscreen></iframe></div>

?

Ich frage deswegen, weil ich manuell für zig Auflösungen was habe und zusätzlich Mobile...daher ist es mir wichtig, dass mein Code stimmt ohne einen Fehler.