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.

YouTube Video iFrame einbetten

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.

YouTube Video mobile Ansicht

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:

  1. Sobald die Seite mit einem Video aufgerufen wird, soll sich das Video automatisch an die Seitenbreite anpassen
  2. Es muss sichergestellt werden, dass das Video immer im gleichen Format ausgegeben wird (z.B. 16:9)
  3. 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.

 

Codepalm
Die Höhe von iFrames automatisch anpassen