Lecteurs vidéo et vidéo en direct intégrés

Avec le lecteur vidéo intégré, vous pouvez facilement ajouter des vidéos et des vidéos en direct provenant de Facebook à votre site web. Vous pouvez utiliser toute vidéo publique publiée par une Page ou une personne en tant que vidéo ou source vidéo en direct.

Configurateur de lecteur vidéo intégréExemple de codeParamètresAjout manuel de code

Étape par étape

1. Choisir l’URL ou la Page

Choisissez l’URL d’une vidéo Facebook que vous souhaitez intégrer.

2. Configurateur de code

Collez l’URL dans le configurateur de code et cliquez sur le bouton Obtenir le code pour générer le code du lecteur vidéo intégré.

3. Copier et coller l’extrait HTML

Copiez et collez l’extrait dans le code HTML du site web de destination.

Configurateur de lecteur vidéo intégré

URL de la vidéo
La largeur de pixel de la vidéo

Exemple de code complet

Copiez et collez l’exemple de code sur votre site web. Remplacez la valeur data-href par l’URL de votre vidéo. Contrôlez la taille du lecteur à l’aide de l’attribut data-width.

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

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>(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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</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>

Paramètres

Le configurateur ci-dessus n’inclut pas tous les paramètres possibles pour le lecteur vidéo intégré. Vous pouvez également modifier les paramètres suivants :

Paramètre Description Valeur par défaut

data-href

L’URL absolue de la vidéo.

n/a

data-allowfullscreen

Permet la lecture de la vidéo en plein écran. Peut être false (clair) ou true (foncé).

false

data-autoplay

Commence automatiquement la lecture de la vidéo lors du chargement de la page. La vidéo est lue sans son (en sourdine). Les visiteurs peuvent activer le son à l’aide des commandes du lecteur vidéo. Ce paramètre ne s’applique pas aux appareils mobiles. Peut être false (clair) ou true (foncé).

false

data-width

La largeur du conteneur vidéo. La valeur minimale est 220px.

auto

data-show-text

Définissez ce paramètre sur true pour insérer le texte de la publication Facebook associée à la vidéo, le cas échéant. Disponible uniquement pour les sites de bureau.

false

data-show-captions

Définissez ce paramètre sur true pour afficher les légendes (le cas échéant) par défaut. Les légendes sont uniquement disponibles sur ordinateur.

false

Exemple de configuration

<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>

Obtention du code à partir d’une publication vidéo

1. Accéder à votre publication vidéo

Si vous publiez une vidéo publique (voir les questions/réponses), vous pouvez obtenir le code d’intégration directement à partir de la publication vidéo.

Choisissez Embed Video (Intégrer la vidéo) dans le menu d’options :

Vous pouvez également sélectionner le bouton Embed Video (Intégrer la vidéo) en bas à droite lorsque vous visionnez la vidéo en plein écran :

Pour les Pages uniquement

Lorsque vous publiez une vidéo publique sur une Page (voir les questions/réponses), vous pouvez obtenir le code d’intégration directement à partir du journal. Cliquez sur l’icône affichée en haut à droite de la publication sur Facebook.

Choisissez Embed Video (Intégrer la publication) dans le menu déroulant : (Pour les Pages uniquement)

2. Copier et coller le code

Une boîte de dialogue qui contient le code permettant d’intégrer votre publication vidéo s’affiche. Copiez et collez ce code dans votre page web à l’endroit où vous voulez que la publication apparaisse.

Pour obtenir des détails techniques, consultez la section Ajout manuel de code.

Ajout manuel de code

Au lieu d’utiliser le générateur de code, vous pouvez intégrer le code manuellement.

1. Obtenir l’URL de la publication vidéo

Vous devez tout d’abord obtenir l’URL de la publication vidéo que vous voulez partager. La publication vidéo doit être publique (voir les questions/réponses). Les publications publiques ont une icône grise en forme de globe à côté de l’heure de publication :

À des fins de test, vous pouvez utiliser cet exemple d’URL :

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

2. Charger le SDK JavaScript

Pour utiliser le plugin Embedded Video Player ou tout autre Social Plugin, vous devez ajouter le SDK Facebook pour JavaScript à votre site web. Vous n’avez besoin de charger le SDK qu’une seule fois par page, idéalement après la balise ouvrante <body> :

<div id="fb-root"></div>
<script>(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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Pour en savoir plus sur la mise en œuvre du SDK JavaScript, consultez le manuel SDK JavaScript – Démarrage rapide.

3. Placer la balise du lecteur vidéo intégré

Ensuite, placez la balise du lecteur vidéo intégré à l’endroit de votre choix sur votre site web. Remplacez {your-video-post-url} par l’URL de votre publication.

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

4. Tests

Une fois ces étapes effectuées, vous pourrez tester votre lecteur vidéo intégré. Une intégration terminée donne un résultat tel que celui-ci :

<html>
  <title>My Website</title>
<body>
  <div id="fb-root"></div>
  <script>(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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</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>

La capture d’écran ci-dessous illustre le résultat de notre exemple aux fins de test.

5. Personnalisation

Suivez les instructions figurant plus bas sur cette page pour modifier la taille, la langue et d’autres paramètres.

Obtention de l’URL d’une publication vidéo

Dans certains cas, le code d’intégration est créé par un CMS et l’URL brute de la publication suffit. Vous pouvez obtenir l’URL d’une publication de deux façons :

  1. Copiez l’URL du lien permanent à partir de la barre d’adresse de votre navigateur.
  2. Cliquez avec le bouton droit de la souris sur l’heure de publication de la publication et copiez l’adresse du lien.

Ces deux méthodes sont indiquées en rouge dans la capture d’écran ci-dessous.

Avec l’API Graph

Si vous souhaitez inclure automatiquement des lecteurs vidéo intégrés sur votre site web, vous pouvez utiliser l’API Graph pour agréger les vidéos. Par exemple, vous pouvez utiliser le point de terminaison de l’API Page Videos, qui envoie une réponse pour votre demande à /{page-id}/videos au format suivant (abrégé) :

{
  "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": []
    }
   ]
}

Pour obtenir l’URL de la vidéo :

Utilisez la valeur id pour créer une URL respectant la structure suivante :

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

N’utilisez pas la propriété embed_html pour intégrer des vidéos. Pour en savoir plus sur ce sujet, consultez la section Questions/réponses.

Disposition sur le bureau

Vous pouvez ajuster la largeur du lecteur vidéo intégré sur le bureau à l’aide de l’attribut data-width dans la balise du lecteur vidéo intégré, comme indiqué dans l’exemple ci-dessous. La valeur doit être d’au moins 220. Il n’y a pas de limite supérieure, mais le lecteur ne sera jamais plus grand que son élément parent.

N’utilisez pas de balises de style CSS pour modifier la taille d’un plugin. Cela peut créer des erreurs d’affichage.

<!-- 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>

Plein écran

Vous pouvez ajouter la propriété data-allowfullscreen="true" pour permettre à la vidéo d’être lue en mode plein écran.

Disposition au format web mobile

Au format web mobile, le lecteur vidéo intégré s’adapte automatiquement à la largeur intérieure de son élément parent.

Réglage de la langue

Vous pouvez modifier la langue du plugin Embedded Video Player en chargeant une version localisée du SDK Facebook pour JavaScript. Lorsque vous chargez le SDK, modifiez la valeur js.src en la remplaçant par votre paramètre régional : remplacez en_US par votre paramètre régional, par exemple fr_FR pour le français (France) :

js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v2.5";

Les paramètres régionaux pris en charge sont répertoriés dans le fichier XML de paramètres régionaux de Facebook. Vous devrez peut-être modifier la largeur d’un Social Plugin si vous voulez afficher plusieurs langues. Vous trouverez plus d’informations sur notre page Localisation et traduction.

Wordpress

Si vous utilisez déjà le SDK Facebook pour JavaScript dans votre site Wordpress, vous pouvez utiliser le plugin Embedded Video Player en ajoutant simplement la balise fb-video à votre publication :

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

Si vous n’utilisez pas le SDK Facebook pour JavaScript et si vous intégrez une vidéo en copiant et collant l’extrait (récupéré à partir de chaque publication vidéo), le plugin Embedded Video Player ne s’affichera probablement pas, car Wordpress remplacera tous les caractères & par #038;, ce qui interrompra le lecteur.

À la place, utilisez le code suivant pour ajouter le plugin :

<script>window.fbAsyncInit = function() {
  FB.init({
    xfbml      : true,
    version    : 'v2.5'
  });
  }; (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 = "//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>

Une nouvelle intégration Wordpress simplifiée sera bientôt publiée.

Questions/réponses

Puis-je utiliser la propriété videoembed_html de l’API Graph ?

Non, vous ne devez pas utiliser la propriété embed_html. Utilisez plutôt le plugin Embedded Video Player !

À propos de la propriété embed_html :

Le point de terminaison video de l’API Graph sert une propriété nommée embed_html. Sa valeur contient un élément HTML qui peut être intégré dans une page web pour lire la vidéo voulue.

Cette valeur ne doit pas être confondue avec le plugin Embedded Video Player. Nous recommandons de ne plus utiliser cette propriété. Utilisez plutôt le plugin Embedded Video Player !

Si vous utilisez la valeur de la propriété embed_html, votre lecteur vidéo :

  • ne fonctionnera pas sur les appareils mobiles et les tablettes ;
  • ne contiendra pas d’informations supplémentaires telles que le nombre de vues, le titre, etc.

Exemple pour la propriété embed_html (obsolète) :

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