YouTube Video so auf eigener Seite einbinden, dass man es gleich abspielen kann, wenn jemand den Link auf Facebook teilt

Wer auf Facebook schon einmal einen Link zu einem YouTube Video gepostet hat, hat sicher bemerkt, dass Facebook solche Links erkennt und einem gleich mit einem Klick auf das Vorschaubild ermöglicht das Video anzuschauen.

Einfacherweise könnte man natürlich einfach den Link zur Video-Detailseite auf YoutTube posten, manchmal will man aber, dass man den Link zu einer eigenen Seite postet wo man das Video eingebettet hat, man es aber trotzdem beim Teilen auf Facebook dort mit einem Klick gleich anschauen kann.

Wie geht das?

Grundsätzlich kann man Faebook mitteilen, dass sich auf einer Seite im Web zu der man den Link teilt ein Video befindet. Dafür gibt es von Facebook das Open Graph Protocol (OGP).

Dieses funktioniert einfach, indem man in den HEAD Bereich des HTML Codes einer Seite spezielle META-Tags einbaut, die Facebook versteht, wenn jemand den Link zu dieser Seite in Facebook teilt.

Der Tag für ein Video heißt:

<meta property="og:video" content="http://www.youtube.com/v/1wJxAuduE_E" />

Zusätzlich gibt es noch einen Tag um das Video als Flash-SWF Datei zu kennzeichnen:

<meta property="og:video:type" content="application/x-shockwave-flash" />

Und sogar das Vorschaubild, das Facebook dann verwendet kann man bestimmen:

<meta property="og:image" content="http://img.youtube.com/vi/1wJxAuduE_E/0.jpg" />

YouTube bietet einem über eine einfache Link-API die Möglichkeit Inhalte die auf YouTube gehostet werden anzusteuern. Alles was man braucht die die ID eines Videos. Diese sieht man oben im Link wenn man auf eine Video-Detail-Seite auf Youtube schaut.

Beim Video http://www.youtube.com/watch?v=1wJxAuduE_E ist die ID besipielsweise das 1wJxAuduE_E.

Damit kann man jetzt den YouTube Player direkt ansteuern indem man die ID an den Link http://www.youtube.com/v/ anhängt, was in meinem Fall dann so aussieht: http://www.youtube.com/v/1wJxAuduE_E.

Diesen Direktlink zum Video-Player gibt man jetzt in den og:video META-Tag. Teilt man jetzt den Link auf Facebook zeigt Facebook das Video direkt in der Wall an, wenn man auf das Vorschaubild klickt, und es bekommt auch so ein Video-Play-Symbol:

YouTube ermöglicht einem noch zusätzliche Einstellungen, mehr dazu erfährst du in der YouTube Player API Reference (EN).

Infos zum Open Graph Protokoll findest du bei Facebook Developers (EN).