Boehrsi.de - Blog

Youtube Videos werden quasi überall im Netz eingebunden und natürlich auch auf meiner Seite. Denn Reviews oder Vorstellungsvideos von Hardware oder Gaming Videos vermitteln einfach ein besseres Bild als reiner Text und Bilder. Somit ist es mir auch ziemlich wichtig das ich viele Videos ohne Probleme einbinden kann. Youtube Videos kann man an sich recht einfach einbinden, einfach den Code auf der Youtube Seite des entsprechenden Videos kopieren und alles wird erledigt. Aber dabei werden relativ viele Informationen und Daten von der Youtube Seite geladen und dies bremst bei vielen Videos manchmal sehr stark. Zumindest konnte ich einen messbaren Unterschied feststellen.

Die Lösung für dieses Problem ist weniger Daten direkt von Youtube zu beziehen und etwas mehr Arbeit “selbst” zu erledigen. Dies kann man durch externe Bibliotheken (php-youtube-easy-embed-manager open_in_new, YouTube-Lite-Embed open_in_new) lösen die man auf dem eigenen Webspace ablegt und einbindet. Ich selber wollte aber nicht wegen ein paar Youtube Videos eine extra Bibliothek einbinden, denn dies wiederum war mir etwas zu viel. Die Lösung für mich ist ein kleines selbst erstelltes JavaScript, dieses nutzt die Youtube API und bindet Videos sehr simpel und sparsam ein. Wen interessiert wie ich dies umsetze, der sollte im unteren Teil der News weiterlesen.

Voraussetzungen: Damit ich Youtube Videos sparsam einbinden kann benötige ich die folgenden Komponenten:

• Ein kleines JavaScript.
• Zwei CSS Klassen.
• Minimaler weiterer HTML Code.
• Die ID des Youtube Videos.
• Der JavaScript Aufruf im Code.

Umsetzung: Das JavaScript lädt entsprechend der Youtube API das Vorschaubild und den Titel via JSON open_in_new. Diese werden für die Einbindung via HTML benötigt und zusätzlich wird das Youtube Play Icon zentriert über das Vorschaubild gelegt. Weiterhin sorgt das Script dafür, dass ein Klick auf das Bild das Video wirklich einbindet und direkt mit dem Abspielen startet. Dieses Vorgehen ist dann also genau so wie es der Nutzer ohnehin von eingebundenen Videos ist. Die beiden CSS Klassen machen nicht viel mehr als das Video Objekt zu zentrieren und die Größe anzupassen, bieten aber natürlich die Möglichkeit alles den eigenen Anforderungen entsprechend anzupassen. Der HTML Code besteht aus einem simplen div, dieses nutzt die entsprechende CSS Klasse und muss als id die ID des Youtube Videos haben. Dies ist nötig damit das JavaScript den korrekten Bereich bei einem Klick ersetzen kann und das entsprechende Video anzeigt. Auf diese Art kann ich ohne viel Aufwand, Traffic und Code in der eigentlichen News Youtube Videos einbinden. Damit ihr euch vorstellen könnt wie das Ganze aussieht binde ich einfach mal eines meiner älteren Videos hier als Beispiel ein.Ist dies auch etwas für euch oder bindet ihr Videos direkt mit dem von Youtube gelieferten Code ein?