Was ist das Seitenverhältnis?

Das Seitenverhältnis beschreibt die Form eines Videobilds als Verhältnis von Breite zu Höhe. Fast alle Standard-YouTube-Videos werden im Format 16:9 (Breitbild) gefilmt und veröffentlicht, während Shorts im Format 9:16 (vertikal) gefilmt und veröffentlicht werden.

Warum das beim Einbetten wichtig ist

Wenn Breite und Höhe eines Players nicht dem tatsächlichen Seitenverhältnis des Videos entsprechen, entstehen schwarze Balken oder ein gestrecktes, beschnittenes Bild. Ein responsives Embed hält bei jeder Größe das richtige Verhältnis, indem ein prozentbasierter Wrapper verwendet wird (56,25% padding-bottom für 16:9, 177,78% für 9:16) statt fester Pixelmaße.

Das richtige Verhältnis automatisch bekommen

Der Embed-Code-Generator wechselt seinen responsiven Wrapper automatisch zwischen 16:9 und 9:16, sobald du das Shorts-Format aktivierst, sodass du den Padding-Prozentsatz nicht von Hand berechnen musst.

Wie das Seitenverhältnis im Code ausgedrückt wird

Das Seitenverhältnis wird meist als zwei durch einen Doppelpunkt getrennte Zahlen geschrieben, die die Breite im Verhältnis zur Höhe beschreiben: 16:9 bedeutet, dass die Breite 16 Einheiten pro 9 Einheiten Höhe beträgt, unabhängig von der tatsächlichen Pixelgröße. Deshalb teilen sich ein 1280×720-Video und eine 640×360-Version desselben Materials dasselbe Seitenverhältnis 16:9: Beide vereinfachen sich zur gleichen Proportion. In CSS taucht diese Idee entweder als Prozentwert auf (56,25%, also 9 geteilt durch 16), verwendet in der klassischen responsiven Einbettungstechnik, oder direkt über die moderne aspect-ratio-Eigenschaft, geschrieben als aspect-ratio:16/9.

Ein praktisches Beispiel

Stell dir eine Fotogalerie-Seite vor, die normale YouTube-Videos und Shorts mischt. Eine feste Embed-Größe für beide zu verwenden, würde entweder die vertikalen Shorts unschön in eine breite Box beschneiden oder die Breitbildvideos zu stark verkleinern, um in eine schmale Box zu passen. Die Lösung ist, das passende Seitenverhältnis je Videotyp anzuwenden: ein 16:9-Wrapper für normale Videos und ein separater 9:16-Wrapper speziell für Shorts, wobei jeder schon vor dem Laden des Videos den richtigen Platz reserviert.

Seitenverhältnis versus Auflösung

Seitenverhältnis und Auflösung sind verwandte, aber unterschiedliche Konzepte, und sie zu verwechseln ist eine häufige Verwirrungsquelle. Auflösung ist die tatsächliche Pixelzahl (zum Beispiel 1920×1080); das Seitenverhältnis ist die Proportion, auf die sich diese Zahlen reduzieren lassen (in diesem Fall 16:9). Zwei Videos können dieselbe Auflösung, aber unterschiedliche Seitenverhältnisse haben, wenn eines mit schwarzen Balken versehen wurde, und zwei Videos können dasselbe Seitenverhältnis bei völlig unterschiedlichen Auflösungen haben: eine 640×360-Vorschau und eine vollständige 1920×1080-Version sind beide 16:9. Beim Bau eines responsiven Embeds bestimmt das Seitenverhältnis, nicht die konkrete Auflösung, die Proportionen des Wrappers.

Ein falsches Verhältnis ist einer der optisch offensichtlichsten Einbettungsfehler, weil es sofort auffällige schwarze Balken oder gestrecktes, verzerrtes Bild erzeugt, anders als subtilere Probleme wie ein fehlender Datenschutzparameter.

Eine schnelle Möglichkeit, vor der Veröffentlichung zu prüfen, ob das Verhältnis stimmt, ist die Vorschau des Embeds sowohl bei einer breiten Desktop-Breite als auch bei einer schmalen Mobilbreite; erscheinen bei beiden schwarze Balken, passt der Wrapper-Prozentsatz nicht zur tatsächlichen Form des Videos und muss angepasst werden.

Häufig gestellte Fragen