🎬 Die Höhe von YouTube-iFrames automatisch anpassen

Die Höhe von YouTube Videos und Google Maps automatisch anpassen

Meine Kunden möchten immer wieder einmal, dass ich ihnen YouTube-Videos auf Ihrer Webseite einbinde.

Um einen iFrame auf der Webseite zu hinterlegen muss man kein Web-Entwickler sein. Einfach auf das YouTube-Video gehen, auf Teilen klicken und "Einbetten" auswählen.

Versteh’ mich bitte nicht falsch. Ich füge solche Elemente gerne für meine Kunden ein.

Ich kann auch gut nachvollziehen, dass es einige Webseiten-Besitzer gibt, die zwar eine Web-Präsenz für ihre Firma brauchen, aber sich technisch nicht so ganz ran trauen.

Sie möchten Ihre Webseite und den Content einfach in die Hände eines Fachmanns geben, der weiß was er macht.

Als Entwickler schaue nur immer etwas genauer hin, als es einer meiner Kunden machen würde. (Designer natürlich ausgenommen 😉)

Das Problem bei mobilen YouTube-iFrames

Wenn du auch schon einmal ein YouTube-Video auf deiner Webseite eingefügt hast, kennst du das Problem mit der mobilen Darstellung: Das Video ist breiter als die mobile Darstellung es zulässt.

Wir könnten dem iFrame natürlich 100% statt der statischen Breite geben, aber dann erscheint ein hässlicher, schwarzer Rahmen um das iFrame Video. Das liegt an der statischen Höhe des Videos.

Eine einfache Einstellung zum Behalten des Seitenverhältnisses gibt es bei nativem HTML oder CSS nicht.

Dazu muss man einige Hacks programmieren, die in unterschiedlichen Browsern aber immer etwas anders heraus kommen.

Das gleiche Problem wirst du bei der Integration von Google Maps feststellen. Das Einfügen der Karte funktioniert nämlich ganz genauso.

Der Unterschied bei Google Maps besteht nur darin, dass kein schwarzer Rahmen ausgegeben wird.

Es wird mehr von der Karte ausgegeben, wodurch die Karte aber im Hochformat dargestellt wird. Das möchte man häufig nicht.

Die Lösung: Das automatische Rescaling mit jQuery

Für das Problem der iFrames auf mobilen Webseiten habe ich ein kleines jQuery-Script vorbereitet, dass das Format aller iFrames auf einer Webseite automatisch anpasst.

Hier kannst du das fertige Skript testen.

Egal, ob du dir das Video mit dem Smartphone, Tablet oder dem Desktop-Rechner ansiehst: Es bleibt immer in der gleichen Auflösung 16:9.

Versuche auch gerne dein Browserfenster zu skalieren, oder teste mit der Developer-Konsole (F12) die mobile oder responsive Ansicht aus.

In diesem Artikel werde ich dir zeigen, wie du iFrames auf deiner eigenen Webseite automatisch an die Breite des Bildschirms anpasst.

Wenn du nicht lernen möchtest, wie das Skript aufgebaut ist, kommst du hier zum fertigen Scaling-Script für iFrames.

Vergiss aber nicht den kleinen CSS-Schnipsel am Ende auf deiner Webseite einzufügen!

YouTube iFrame-Rescaling mit jQuery

Es gibt ein paar Fälle, die in unserem Skript beachtet werden müssen:

Sobald die Seite mit einem Video aufgerufen wird, soll sich das Video automatisch an die Seitenbreite anpassen
Es muss sichergestellt werden, dass das Video immer im gleichen Format ausgegeben wird (z.B. 16:9)
Bei der Skalierung des Bildschirms sollte sich das Video automatisch anpassen

Mit diesen wenigen Punkten im Kopf können wir anfangen unsere jQuery-Struktur zu erstellen.

(function($) {
	
	// Die $( document ).ready() Funktion lässt unseren nachfolgenden Code so lange warten, bis die Seite alle Elemente geladen hat.
	// Sollten wir das nicht tun, kann es sein, dass der Code ausgeführt wird, bevor die iFrames geladen wurden
	$( document ).ready( function() {
		
		// Sobald die iFrames geladen wurden, wird unsere Funktion "iframeResize()" aufgerufen
		iframeResize();
		
		// Zudem benötigen wir eine Funktion, die überprüft, wenn das Browser-Fenster 
		$( window ).resize( function() {
			iframeResize();
		});
		
	});
	
	function iframeResize() {
		
		// Hier werden alle Videos nach einer möglichen Skalierung überprüft
		
	}
	
	// An dieser Stelle werden wir zwei Erweiterungen für jQuery hinzufügen
	
})(jQuery);

Das ist unser Grundgerüst.

Nun erstellen wir die Funktion "iframeResize", die sich nicht direkt um die Skalierung des YouTube-Videos kümmert. Mit ihr weisen wir den Elementen das nachfolgende jQuery-Plugins "rescale" zu.

function iframeResize() {
	
	// Wir ziehen uns mit einem jQuery-Selector alle iFrame Elemente heran, die Skaliert werden sollen
	var iframes = $( 'iframe[data-scaling="true"]' );
	
	// Sollte es kein iFrame auf der Seite geben, wird der nachfolgende Code nicht ausgeführt
	if( iframes.exists() ) {
		
		// Alle iFrames werden durchlaufen, damit das Scaling auf alle Videos angewendet wird
		iframes.each( function() {
			
			let iframe = $( this );
			
			// Nun entnehmen wir dem iFrame das festgelegte Videoformat, wenn es existiert. Ansonsten wird das Standard-Format "16:9" verwendet
			let videoFormat = '16:9';
			if( typeof iframe.attr( 'data-format' ) !== "undefined" && iframe.attr( 'data-format' ).includes( ':' ) )
				videoFormat = iframe.attr( 'data-format' );
			
			// Hier rufen wir die Funktion "rescale" auf, die wir gleich erstellen werden
			iframe.rescale( videoFormat );
			
		});
		
	}
	
}

iFrame-Rescaling mit einem jQuery-Plugin

Als nächstes benötigen wir nur noch die beiden jQuery-Plugins "rescale" und "exists".

Solltest du kein Plugin für "exists" erstellen wollen, kannst du auch gerne mit dem Wert length überprüfen, ob es ein iFrame auf der aktuellen Seite gibt.

Die beiden Plugins werden an die Stelle im Code mit dem Kommentar "An dieser Stelle werden wir zwei Erweiterungen für jQuery hinzufügen" platziert.

$.fn.rescale = function( format ) {
	
	// Das Videoformat wird in ein Format gebracht, das wir in der weiteren Programmierung verwenden können
	let formatWidth = parseInt( format.split(':')[0] );
	let formatHeight = parseInt( format.split(':')[1] );
	
	// Nun berechnen wir den Multiplikator für die Höhe
	let formatRatio = formatHeight / formatWidth;
	
	// Die aktuelle Höhe wird mit der "Ratio", also dem Multiplikator angewendet, um das richtige Format der Höhe zu erhalten
	let currentWidth = this.width();
	let newHeight = formatRatio * currentWidth;
	
	// Zum Schluss wird nur noch der errechnete Wert auf das Element angewendet
	this.height( Math.round( newHeight ) );
	
};

// Dieses jQuery-Plugin ist optional. Ich erstelle mir gerne eine solche Funktion, um öfter darauf zugreifen zu können.
// Alternativ kannst du in den entsprechenden Bedingungen auch "ELEMENT.length > 0" verwenden.
$.fn.exists = function() {
	return this.length > 0;
};

Und das war auch schon der ganze jQuery-Code, um das YouTube-Video automatisch an die Seitenbreite anzupassen.

Notwendige Formatierung für die Darstellung der iFrames

Es gibt nur noch eine Kleinigkeit, die das Video benötigt: Eine kleine CSS-Anpassung.

/* Durch die Angabe einer maximalen und gleichzeitig minimalen Breite können wir das Element immer auf die volle Breite des Inhalts bringen */
iframe[data-scaling="true"] {
	min-width: 100%;
	max-width: 100%;
}

Sowohl die CSS-Anpassung, als auch das JavaScript kannst du in eine globale Datei auslagern, die auf jeder Seite aufgerufen wird.

Das iFrame Rescaling auf deiner Webseite verwenden

Mit folgendem HTML-Tag kannst du ein iFrame mit der automatischen Skalierung verwenden:

<iframe width="100%" data-scaling="true" data-format="16:9" src="https://www.youtube.com/embed/aqz-KE-bpKQ" ></iframe>

Wichtig sind die Angaben "data-scaling" und "data-format". Diese Attribute kannst du in jeden bestehenden iFrame hinzufügen. Egal, ob du damit YouTube, Google Maps oder etwas ganz anderes ansprechen möchtest.

Weitere YouTube-Parameter können natürlich wie gewohnt platziert werden. Das beeinflusst unser Skript nicht.

Das fertige Scaling-Script für iFrames

Wenn du die Schritte bis hierher verfolgt hat, hast du das Scaling-Script nun fertig gestellt.

Oder du hast meine schöne Erklärung komplett übersprungen. Das ist kein Problem. Ich mache dir natürlich keine Vorwürfe 😉

Den kompletten Code findest du auch auf Codepen:

See the Pen iFrame Höhe automatisch anpassen by Dennis Artinger (@Codepalm) on CodePen.

Dieses Skript und die YouTube 2-Klick Lösung sind leider noch nicht ganz kompatibel miteinander. Ich werde in den nächsten Wochen aber ein Update für die 2-Klick-Lösung entwickeln, mit der man beide Skripte zusammen verwenden kann.

Vernetze dich mit Codepalm auf den Sozialen Kanälen, oder trage dich zum Newsletter ein, um dieses Update nicht zu verpassen.