YouTube Videos responsive einbinden
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:
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.
<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.