Wiedner Gürtel 12/1/2, 1040 Wien

YouTube Videos responsive einbinden

Bewertung: 5 / 5

Stern aktiv Stern aktiv Stern aktiv Stern aktiv Stern aktiv
 

Die Video-Plattform YouTube bietet die Möglichkeit, dass man Videos in die eigene Website einbaut. Dies ist dank einer Teilen-Funktion in YouTube sehr einfach und schnell bewerkstelligt.
Jedoch wird das Video mit dem von Google gelieferten Code auf mobilen Endgeräten nicht mit verkleinert und deswegen abgeschnitten. Mit diesem Trick passiert das nicht mehr.

 

Beitrag von

Sebastian Prohaska

Inhaber & Geschäftsführer der SEO- & Online-Marketing-Agentur ithelps. Begeisterter Marvel-Fan, Leseratte, Kraftsportler und Online-Marketing-Nerd.

 

 

1. Das Video in die eigene Website einbinden

Hierzu einfach das gewünschte Video in Youtube suchen, dann auf den Button Teilen klicken.  youtube teilen
Hier nun auf „Einbetten“ gehen und den Code, der dort im Textfeld steht, kopieren.

Dieser Code sieht in etwa so aus:

code youtube video einbetten

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.

div class

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.


Des Weiteren solltest du auch unseren Beitrag Google Maps Responsive einbinden lesen!

 

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.

Interessante Blogartikel

Bleiben wir in Kontakt!

Weitere Blogbeiträge

21. Dezember 2022
Anleitungen

YouTube Videos responsive einbinden

Weiterlesen ...
Browser Cache leeren
14. Januar 2023
Anleitungen

Browser Cache leeren (Einfache Anleitung)

Weiterlesen ...
Wordpress bei Google anmelden
21. Dezember 2022
Anleitungen

Wie du Wordpress bei Google anmelden kannst und gefunden wirst - Anleitung

Weiterlesen ...
16. November 2022
Anleitungen

Google Maps Karte responsive einbinden

Weiterlesen ...

ithelps logo 220

Wiedner Gürtel 12/1/2, 1040  Wien
Pernerstorferstraße 18, 3032 Eichgraben
Birkenbergstr. 1, 6410 Telfs
Bessemerstraße 82/10. OG Süd , 12103 Berlin

Die 10 häufigsten SEO Fehler

und wie Sie diese vermeiden können: