Simples CSS um alle Youtube Videos auf Deiner Seite responsive anzuzeigen

Um alle Youtube Videos auf Deiner Seite responsive anzuzeigen, benötigst Du nur dieses CSS, mehr nicht. Du musst absolut gar nichts an den iframes von Youtube verändern. Und das ohne Du am iframe Code von YouTube ändern musst. Einfach das folgende CSS in Deine CSS Datei an einer beliebigen Stelle einfügen und gut.

YouTube empfiehlt die folgenden Größen und Seitenverhältnisse:

  • 2.160 Pixel: 3.840 x 2.160
  • 1.440 Pixel: 2.560 x 1.440
  • 1.080 Pixel: 1.920 x 1.080
  • 720 Pixel: 1.280 x 720
  • 480 Pixel: 854 x 480
  • 360 Pixel: 640 x 360
  • 240 Pixel: 426 x 240

Daraus ergibt sich das folgende, allgemein gültige und nach Googles Empfehlungen ausgerichtete CSS:

möglichst volle Breite

Ich bevorzuge diese Variante: Zeigt auf jeden Fall die empfohlene Breite an. Die Höhe kann je nach Setup schwarze Balken enthalten.

/** Makes Youtube Videos Responsive
 ** by Viktor Dite
 */
@media (min-device-width: 3840px){
	/* 3.840 x 2.160 */
	iframe[src*="https://www.youtube"] {
	  	width: 3840px !important;
  		height: 2160px !important;
  		max-width: 100% !important;
  		max-height: auto !important;
	}
}

@media (min-device-width: 2560px){
	/* 2.560 x 1.440 */
	iframe[src*="https://www.youtube"] {
	  	width: 2560px !important;
  		height: 1440px !important;
  		max-width: 100% !important;
  		max-height: auto !important;
	}
}

@media (min-device-width: 1920px){
	/* 1.920 x 1.080 */
	iframe[src*="https://www.youtube"] {
  		width: 1920px !important;
  		height: 1080px !important;
  		max-width: 100% !important;
  		max-height: auto !important;
	}
}

@media (min-device-width: 1280px){
	/* 1.280 x 720 */
	iframe[src*="https://www.youtube"] {
  		width: 1280px !important;
  		height: 720px !important;
  		max-width: 100% !important;
  		max-height: auto !important;
	}
}

@media (min-device-width: 854px){
	/* 854 x 480 */
	iframe[src*="https://www.youtube"] {
  		width: 854px !important;
  		height: 480px !important;
  		max-width: 100% !important;
  		max-height: auto !important;
	}
}

@media (max-device-width: 640px){
	/* 640 x 360 */
	iframe[src*="https://www.youtube"] {
  		width: 640px !important;
  		height: 360px !important;
  		max-width: 100% !important;
  		max-height: auto !important;
	}	
}
@media (max-device-width: 426px){
	/* 426 x 240 */
	iframe[src*="https://www.youtube"] {
  		width: 426px !important;
  		height: 240px !important;
  		max-width: 100% !important;
  		max-height: auto !important;
	}	
}

möglichst volle Höhe:

Zeigt auf jeden Fall die empfohlene Höhe an. Die Breite kann je nach Setup beschnitten werden.

/** Makes Youtube Videos Responsive
 ** by Viktor Dite
 */
@media (min-device-width: 3840px){
	/* 3.840 x 2.160 */
	iframe[src*="https://www.youtube"] {
	  	width: 3840px !important;
  		height: 2160px !important;
	}
}

@media (max-device-width: 3839px){
	/* 2.560 x 1.440 */
	iframe[src*="https://www.youtube"] {
	  	width: 2560px !important;
  		height: 1440px !important;
	}
}

@media (max-device-width: 2559px){
	/* 1.920 x 1.080 */
	iframe[src*="https://www.youtube"] {
	  	width: 1920px !important;
  		height: 1080px !important;
	}
}

@media (max-device-width: 1919px){
	/* 1.280 x 720 */
	iframe[src*="https://www.youtube"] {
  		width: 1280px !important;
  		height: 720px !important;
	}
}

@media (max-device-width: 1279px){
	/* 854 x 480 */
	iframe[src*="https://www.youtube"] {
  		width: 854px !important;
  		height: 480px !important;
	}
}

@media (max-device-width: 853px){
	/* 640 x 360 */
	iframe[src*="https://www.youtube"] {
  		width: 640px !important;
  		height: 360px !important;
	}
}

@media (max-device-width: 639px){
	/* 426 x 240 */
	iframe[src*="https://www.youtube"] {
  		width: 426px !important;
  		height: 240px !important;
	}	
}

Ergänze Dein CSS file um diese wenige Zeilen, und Du wirst Dir nie wieder Sorgen machen müssen um die Darstellung von YouTube Videos in Deinen Webseiten.

Das aller wichtigste daran ist, dass Du absolut nichts am iframe Code von YouTube ändern musst.


Letzte Änderung:

Viktor Dite aka Technickr

Hi, ich bin Viktor - Dipl. Informatiker mit einem Faible für digitale Medien. Man nennt mich auch gern mal den Technickr, denn ich zeige den Leuten mit Leidenschaft coole Technik-Gadgets, die ihr Leben auf eine sinnvolle Weise bereichern können und das investierte Geld wert sind. Ich teile meine Leidenschaft mit Dir bereits seit 2006 auf diesem Blog und betrachte mich als Digital Native seit 1995.

Wer bin ich und was mache ich? Dipl. Informatiker seit 2010 | Digital Native seit 1995 | Content Creator | Affiliate | SEO | Social Media Management & Advertising | Media & Design Coordination | HighTicket eCommerce Shop Betreiber für Schlafoptimierung | Biohacker