YouTube Videos Responsive darstellen

YouTube Videos responsive einbinden

YouTube bietet die Möglichkeit, dass man Videos in die eigene Website einbinden kann. Jedoch wird das Video auf mobilen Endgeräten nicht mit verkleinert.
Das heißt meist werden die Videos dann abgeschnitten dargestellt.

YouTube Video in die eigene Website einbinden

Einfach das Video in Youtube suchen, dann auf den Button „Teilen“ klicken. Dann auf „Einbetten“ gehen und den Code, der dort steht, kopieren.

Der Code sieht so aus:

<iframe width="560" height="315" src="https://www.youtube.com/embed/YMvcCfs8mf8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
Jetzt einfach den Code in der eigenen Website an der gewünschten Stelle einfügen.

YouTube Videos für mobile Endgeräte optimieren

Jetzt muss um dieses „iframe“ ein „div“ gesetzt werden, die eine Klasse bekommt. Denk dran, dass die Klasse frei wählbar ist, solange Sie nicht schon vorkommt. Ich selber wähle immer Bezeichnungen, die das widerfinden erleichtert.

<div class="youtubevideo">
<iframe width="560" height="315" src="https://www.youtube.com/embed/YMvcCfs8mf8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

Diesen Container mit der Klasse „youtubevideo“ mit CSS anpassen.

.youtubevideo {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.youtubevideo iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Das war es auch schon.
Das ganze bitte noch kontrollieren und ggf. anpassen über die CSS.