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.