Eingebetteter Videoplayer und Live-Videoplayer

Mit dem eingebetteten Videoplayer kannst du deiner Webseite einfach Facebook-Videos und Facebook-Live-Videos hinzufügen. Dabei kannst du jeden öffentlichen Videobeitrag von einer Seite oder Person als Video- oder Live-Videoquelle verwenden.

Konfigurator für eingebetteten Videoplayer Codebeispiel Einstellungen Manuelles Hinzufügen von Code

Schritt für Schritt

1. URL oder Seite auswählen

Wähle die URL eines Facebook-Videos, das du einbetten möchtest.

2. Code-Konfigurator

Füge die URL in den Code-Konfigurator ein und klicke auf den Button „Code generieren“, um den Code für deinen eingebetteten Videoplayer zu erstellen.

3. HTML-Codeausschnitt kopieren und einfügen

Kopiere den Codeausschnitt und füge ihn in die HTML der Ziel-Webseite ein.

Konfigurator für eingebetteten Videoplayer

URL des Videos

Die Pixelbreite des Videos

Vollständigen Beitrag einfügen

Code generieren

Vollständiges Codebeispiel

Kopiere das Codebeispiel und füge es in deine Webseite ein. Passe den Wert data-href an deine Video-URL an. Kontrolliere die Größe des Players mit dem Attribut data-width.

<html>
<head>
  <title>Your Website Title</title> 
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

  <!-- Your embedded video player code -->
  <div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-show-text="false">
    <div class="fb-xfbml-parse-ignore">
      <blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/">
        <a href="https://www.facebook.com/facebook/videos/10153231379946729/">How to Share With Just Friends</a>
        <p>How to share with just friends.</p>
        Posted by <a href="https://www.facebook.com/facebook/">Facebook</a> on Friday, December 5, 2014
      </blockquote>
    </div>
  </div>

</body>
</html>

Einstellungen

Der obige Konfigurator umfasst nicht alle möglichen Einstellungen für den eingebetteten Videoplayer. Du kannst darüber hinaus die folgenden Einstellungen ändern:

Einstellung	Beschreibung	Standard
`data-href`	Die absolute URL des Videos.	`n/a`
`data-allowfullscreen`	Ermöglicht die Wiedergabe des Videos im Vollbildmodus. Dies kann `false` oder `true` lauten.	`false`
`data-autoplay`	Gibt das Video automatisch wieder, wenn die Seite geladen wird. Das Video wird ohne Ton (stummgeschaltet) wiedergegeben. Personen können den Ton mit den Steuerelementen des Videoplayers einschalten. Diese Einstellung gilt nicht für Mobilgeräte. Dies kann `false` oder `true` lauten.	`false`
`data-lazy`	`true` bedeutet, dass du den Lazy-Loading-Mechanismus des Browsers verwenden sollst, indem du das iframe-Attribut `loading="lazy"` festlegst. Dadurch rendert der Browser das Plugin nicht, wenn es sich nicht in der Nähe des Ansichtsfensters befindet und möglicherweise nie gesehen würde. Die Optionen lauten `true` und `false` (Standard).	`false`
`data-width`	Die Breite des Videocontainers. Mind. `220px`.	`auto`
`data-show-text`	Lege `true` fest, um den Text aus dem mit dem Video verknüpften Facebook-Beitrag einzufügen (falls vorhanden). Nur für Desktop-Webseiten verfügbar.	`false`
`data-show-captions`	Lege `true` fest, um standardmäßig Bildunterschriften anzuzeigen (falls vorhanden). Bildunterschriften sind nur in der Desktop-Version verfügbar.	`false`

Beispielkonfiguration

<div class="fb-video"
  data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
  data-width="500"
  data-allowfullscreen="true"
  data-autoplay="true"
  data-show-captions="true"></div>

Abrufen des Codes von einem Videobeitrag

1. Zum Videobeitrag navigieren

Wenn du ein öffentliches Video postest (siehe FAQ), kannst du den Einbettungscode direkt aus dem Videobeitrag selbst abrufen.

Wähle im Optionsmenü Embed Video aus:

Wenn du ein Video in der Vollbildansicht anzeigst, kannst du auch den Button Embed Video unten rechts auswählen:

Nur bei Seiten

Wenn du ein öffentliches Video auf einer Seite postest (siehe FAQ), kannst du den Einbettungscode direkt von der Chronik abrufen. Klicke auf das Symbol, das oben rechts im Beitrag auf Facebook angezeigt wird.

Wähle im Dropdown-Menü die Option Embed Video aus: (Nur bei Seiten)

2. Code kopieren und einfügen

Ein Dialogfeld mit dem Code für die Einbettung deines Videobeitrags wird angezeigt. Kopiere diesen Code und füge ihn an der Stelle deiner Webseite ein, an welcher der Beitrag angezeigt werden soll.

Technische Einzelheiten dazu findest du im Abschnitt Manuelles Hinzufügen von Code.

Manuelles Hinzufügen von Code

Neben der Verwendung des Codegenerators kannst du den Code auch manuell einbetten.

1. Videobeitrags-URL abrufen

Zunächst musst du die URL des Videobeitrags abrufen, den du teilen möchtest. Der Videobeitrag muss öffentlich sein (siehe FAQs). Dies wird durch das graue Globussymbol direkt neben der Veröffentlichungszeit des Beitrags angegeben:

Zu Testzwecken kannst du diese Beispiel-URL einsetzen:

"https://www.facebook.com/FacebookDevelopers/videos/10152454700553553/"

2. JavaScript-SDK laden

Um das Plugin für den eingebetteten Videoplayer oder ein anderes soziales Plugin verwenden zu können, musst du deiner Webseite das Facebook-JavaScript-SDK hinzufügen. Du musst das SDK nur einmal auf einer Seite laden, am besten direkt nach dem öffnenden <body>-Tag:

<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

Weitere Informationen zum Implementieren des JavaScript-SDK findest du im Leitfaden JavaScript-SDK – Kurzanleitung.

3. Tag des eingebetteten Videoplayers platzieren

Platziere als Nächstes das Tag des eingebetteten Videoplayers an einer beliebigen Stelle deiner Webseite. Ersetze {your-video-post-url} durch die URL deines Beitrags.

<div class="fb-video" data-href="{your-video-post-url}"  
  data-allowfullscreen="true" data-width="500"></div>

4. Testen

Nach Abschluss dieser Schritte kannst du deinen eingebetteten Videoplayer testen. Eine vollständige Integration sieht in etwa wie folgt aus:

<html>
  <title>My Website</title>
<body>
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
  <h1>My Video Player</h1>
  <div class="fb-video"
    data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
    data-width="500"
    data-allowfullscreen="true"></div>
</body>
</html>

Das Ergebnis unseres Testbeispiels wird im Screenshot unten dargestellt.

5. Anpassen

Weiter unten auf dieser Seite erfährst du, wie du Größe, Sprache und andere Einstellungen anpassen kannst.

Abrufen der URL eines Videobeitrags

Es kann vorkommen, dass dein Einbettungscode von einem CMS erstellt wird und du nur die URL des Rohbeitrags benötigst. Du kannst die URL eines Beitrags auf zwei Arten abrufen:

Kopiere die URL des Permalinks aus der Adresszeile deines Browsers.
Klicke mit der rechten Maustaste auf die Veröffentlichungszeit des Beitrags und kopiere die Linkadresse.

Beide Methoden sind im folgenden Screenshot rot hervorgehoben.

Per Graph API

Wenn du eingebettete Videoplayer automatisch in deine Webseite integrieren möchtest, verwendest du wahrscheinlich die Graph API zum Aggregieren von Videos. Du könntest beispielsweise den API-Endpunkt für Seitenvideos verwenden, der eine Antwort auf deine Anfrage an /{page-id}/videos im folgenden Format sendet (verkürzt):

{
  "data": [
    {
      "id": "1234567890",
      "created_time": "2015-02-25T23:22:06+0000",
      "description": "My Video Caption",
      "embed_html": "<iframe src=\"https://www.facebook.com/video/embed?video_id=1234567890\" width=\"1280\" height=\"720\" frameborder=\"0\"></iframe>",
      "format": []
    }
   ]
}

So rufst du die URL des Videos ab:

Erstelle anhand des id-Werts eine URL in folgender Struktur:

"https://www.facebook.com/video.php?v={id}"

Verwende nicht die Eigenschaft embed_html zum Einbetten von Videos. Weitere Informationen zu diesem Thema findest du im FAQ-Abschnitt.

Layout in der Desktop-Version

Du kannst die Breite des eingebetteten Videoplayers auf dem Desktop über das data-width-Attribut im Tag des eingebetteten Videoplayers wie im folgenden Beispiel gezeigt anpassen. Der Wert muss mindestens 220 betragen. Es gibt zwar keinen oberen Grenzwert, aber der Player wird nie größer als sein übergeordnetes Element.

Verwende keine CSS-Style-Tags, um die Größe eines Plugins anzupassen. Dies kann zu Anzeigefehlern führen.

<!-- WRONG! -->
<style type="text/css">
.fb-video {
  width: 500px;
}
</style>
<div class="fb-post" data-href="{your-video-post-url}"></div>

<!-- CORRECT -->
<div class="fb-video" data-href="{your-video-post-url}"
  data-allowfullscreen="true" data-width="500"></div>

Vollbild

Du kannst die Eigenschaft data-allowfullscreen="true" hinzufügen, damit das Video im Vollbildmodus wiedergegeben werden kann.

Layout im mobilen Web

Im mobilen Web wird die Größe des eingebetteten Videoplayers automatisch an die innere Breite seines übergeordneten Elements angepasst.

Ändern der Sprache

Du kannst die Sprache des Plugins für den eingebetteten Videoplayer ändern, indem du eine lokalisierte Version des Facebook JavaScript-SDK lädst. Ändere den Wert von src beim Laden des SDK, um dein Gebietsschema zu verwenden. Ersetze en_US durch deine Ländereinstellung, z. B. fr_FR für Französisch (Frankreich):

src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v3.2"

Möglicherweise musst du die Breite eines sozialen Plugins anpassen, um ausreichend Platz für andere Sprachen zu schaffen. Weitere Informationen dazu findest du auf unserer Seite Lokalisierung und Übersetzung.

Wordpress

Wenn du bereits das Facebook SDK für JavaScript in deiner Wordpress-Webseite verwendest, kannst du das Plugin für den eingebetteten Videoplayer einsetzen, indem du deinem Beitrag einfach das fb-video-Tag hinzufügst:

<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" 
  data-width="500" data-allowfullscreen="true"></div>

Wenn du das Facebook SDK for JavaScript nicht verwendest und ein Video per Kopieren und Einfügen des Codeausschnitts einbettest (von jedem Videobeitrag abrufbar), wird das Plugin für den eingebetteten Videoplayer wahrscheinlich nicht angezeigt, da Wordpress alle &-Zeichen in #038; konvertiert, sodass der Player nicht funktioniert.

Füge das Plugin stattdessen mithilfe des folgenden Codes hinzu:

<script>window.fbAsyncInit = function() {
  FB.init({
    xfbml      : true,
    version    : 'v3.2'
  });
  }; (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" data-width="500" data-allowfullscreen="true"></div>

Wir veröffentlichen schon bald eine neue, einfache Wordpress-Integration.

FAQ

Kann ich die Graph API-`video`-Eigenschaft `embed_html` verwenden?

Nein, du solltest die Eigenschaft embed_html nicht verwenden. Verwende stattdessen das Plugin für den eingebetteten Videoplayer.

Info zur Eigenschaft `embed_html`:

Der Graph API-Endpunkt video gilt für die Eigenschaft embed_html. Deren Wert enthält ein HTML-Element, das in eine Webseite eingebettet werden kann, um das angeforderte Video wiederzugeben.

Dieser Wert ist nicht zu verwechseln mit dem Plugin für den eingebetteten Videoplayer. Wir empfehlen, diese Eigenschaft nicht mehr zu verwenden. Verwende stattdessen das Plugin für den eingebetteten Videoplayer.

Wenn du den Wert der Eigenschaft embed_html verwendest, führt das dazu, dass dein Videoplayer:

nicht auf Mobilgeräten und Tablets funktioniert
keine zusätzlichen Informationen enthält, wie Ansichten, Videotitel usw.

Beispiel für Eigenschaft `embed_html` (veraltet):

{
  "embed_html": 
    "<iframe 
      src=\"https://www.facebook.com/video/embed?video_id=1234567890\"
      width=\"1280\" 
      height=\"720\"
      frameborder=\"0\">
    </iframe>"
}