Das Web einfach erklärt

Wissen und Tipps zum eigenen Internet-Auftritt für jeden einfachst aufbereitet! Dein Mehrwert rund um Web-Lösungen und Sichtbarkeit im World Wide Web.

YouTube Videos responsive einbinden

YouTube Videos responsive einbinden

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:

 

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ück greifen 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.

Kostenloser E-Mail Kurs:

In 5 Schritten zu mehr Website Traffic

Diese 5 Profi-Tipps verhelfen dir zur Optimierung deines Website-Traffics!
In diesem kostenlosen E-Mail Coaching bekommst du von mir 5 Tage lang Profi-Tipps für eine enorme Steigerung deiner Website-Zugriffe.
Klicke jetzt hier und hole dir diesen Kurs.

 


 

So bleibst du TOP-Informiert!

Wir schreiben laufend interessante Artikel mit rund um das Thema Internet, Websites, Social Media, uvm. Bleibe am laufenden und verpasse nichts!

Backups in Joomla! leicht gemacht
Joomla! aktuell und sicher halten
 

Kommentare 1

Gäste - Merlin am Dienstag, 25. April 2017 08:28

Perfekt!

Ohne langes Gerede. Lang gesucht und diese Seite entdeckt, ausprobiert, gefreut und Seite direkt unter den Favoriten gespeichert

Vielen Dank für die Hilfe!!

Perfekt! Ohne langes Gerede. Lang gesucht und diese Seite entdeckt, ausprobiert, gefreut und Seite direkt unter den Favoriten gespeichert Vielen Dank für die Hilfe!!
Bereits registriert? Hier einloggen
Gäste
Sonntag, 19. November 2017

Kostenloser Kurs:

Website Traffic Optimierung E-Mail Kurs

In 5 Schritten zu mehr Website Traffic
Die 5 effektivsten Wege zur Optimierung der eigenen Website-Performance!
Diese 5 Profi-Tipps verhelfen dir zur Optimierung deines Website-Traffics!

Jetzt E-Mail Adresse eintragen und starten: