Inhaltsverzeichnis
1. Das Video in die eigene Website einbinden
Hierzu einfach das gewünschte Video in Youtube suchen, dann auf den Button Teilen klicken.
Hier nun auf „Einbetten“ gehen und den Code, der dort im Textfeld steht, kopieren.
Dieser Code sieht in etwa so aus:
Nun diesen Code in der eigenen Website an der gewünschten Stelle einfügen.
2. Video für mobile Endgeräte optimieren
Nun muss um dieses iframe ein div platziert werden, der eine Klasse bekommt, auf die wir dann zurückgreifen werden.
Diesen Container mit der Klasse responsive-video können wir nun mit CSS anpassen. Hierzu benötigen wir die zwei folgenden Definitionen in CSS:
.responsive-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Möchte man nun die Größe des Videos noch anpassen, muss man den Wert padding-bottom anpassen. Die 56,25 % sind in etwa ein Videoformat in 16:9. Hier heißt es dann probieren, was am besten passt.
Und schon ist das Video responsive und wird auch auf mobilen Endgeräten optimal dargestellt.
Auf der Website von ithelps-Digital findest du außerdem einen Artikel wie du Google Maps Responsive einbinden kannst!
FAQs - Häufig gestellte Fragen zum Einbinden von responsiven YouTube-Videos
Wie bette ich ein YouTube-Video ein?
Du kannst auf den Teilen-Button bei einem gewünschten YouTube-Video klicken, dann „Einbetten“ auswählen und dann den angezeigten Code an der gewünschten Stelle auf deiner Website einfügen. Du kannst auch ein WordPress-Plugin zum Einbetten verwenden.
Kann ich YouTube Videos auf meiner Homepage verlinken?
Ja, da das Video nicht heruntergeladen, sondern nur verlinkt wird, wo es auf YouTube gespeichert ist. Solange die Videoinhalte legal, öffentlich zugänglich sind und keine Hetzreden beinhalten, darfst du sie auf deiner Homepage verlinken. Natürlich kannst du auch deine eigenen YouTube-Videos verlinken.
Kommentar hinterlassen