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

Aufgrund der momentanen Krisensituation können wir keine persönlichen Termine wahrnehmen. Wir stehen Ihnen jedoch telefonisch und per Videokonferenz gerne weiterhin zur Verfügung.

YouTube Videos responsive einbinden

Stern inaktivStern inaktivStern inaktivStern inaktivStern inaktiv
 

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.

 

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!

 

9 Google Ads Fehler

Unsere Leistungen

Bleiben wir in Kontakt!

Blogheim.at Logo

ithelps logo 220

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

Die 10 häufigsten SEO Fehler

und wie Sie diese vermeiden können: