Eingebettete Videos automatisch skalieren lassen

Die Skalierung von in die Webseite eingebetteten Bildern ist einfach. Ein Bild, das für jede unterschiedliche Fenstergröße, die maximale Breite einnehmen soll, bekommt das Attribut width den Wert 100% zugewiesen, und das war es, die Höhe stellt sich automatisch ein.

Bei Youtube-Videos, die sich mittels iframe einbetten lassen, ist es anders. Im iframe kann die Breite zwar ebenfalls auf einen bestimmten Wert gesetzt werden. Die passende Höhe stellt sich aber nicht von alleine ein.

Kunibert und die Welt demonstriert eine Lösung für dieses Skalierungs-Problem.

Im folgen Bespiel ist die Breite auf 100% und die Höhe auf 50% gesetzt. Der Videorahmen nimmt nun auch auch die definierten Größen in Bezug zur Fenstergröße bzw. zum umgebenden Container an, der Rahmen ist aber zum eigentlichen Video je nach gewählter Fenstergröße entweder zu breit oder zu hoch.

Im nun folgen Beispiel ist das Skalierungsproblem mittels CSS gelöst. Die Breite des Videorahmens ist fest und die Höhe wird automatisch so angepasst, dass das eigentliche Video genau „hineinpast“.

Kunibert muss aber einräumen, dass er diese Lösung nicht selber entwickelt, sondern der folgenden Quelle entnommen hat: https://stackoverflow.com/questions/7737557/how-can-i-make-the-youtube-player-scale-to-the-width-of-the-page-but-also-keep-t
… zumal hat er rausgefunden, dass die hier mit CSS umgesetzte Lösung veraltet sein soll.

Modern Solution (2022) – aspect-ratio
With the introduction of the aspect-ratio property in CSS, it’s now very simple to scale a YouTube video without resorting to CSS hacks or JS.

Quite easy with some javascript
jQuery(function() {
function setAspectRatio() {
jQuery(‚iframe‘).each(function() {
jQuery(this).css(‚height‘, jQuery(this).width() * 9/16);
});
}
setAspectRatio();
jQuery(window).resize(setAspectRatio);
});