Vidéo et Lecteur de 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 code Paramètres Ajout manuel du 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

Inclure toute la publication

Obtenir le code

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

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ètres	Description	Valeur par défaut
`data-href`	L’URL absolue de la vidéo.	`n/a`
`data-allowfullscreen`	Autorise la lecture de la vidéo en plein écran. Peut être `false` ou `true`.	`false`
`data-autoplay`	Lance 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` ou `true`.	`false`
`data-lazy`	`true` signifie utiliser le mécanisme de chargement différé du navigateur en configurant l'attribut d'iFrame `loading="lazy"`. L'effet est que le navigateur n'affiche pas le plugin s'il n'est pas près de la fenêtre d'affichage et que le plugin risque de ne jamais être visible. Peut être l’une des valeurs suivantes : `true` ou `false` (valeur par défaut).	`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 pour ordinateur.	`false`
`data-show-captions`	Définissez ce paramètre sur `true` pour afficher les sous-titres (le cas échéant) par défaut. Les sous-titres 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 vidéo) dans le menu déroulant : (Pour les Pages uniquement)

2. Copier-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 du 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 souhaitez 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 Lecteur vidéo intégré ou tout autre plugin social, 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 async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></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 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>

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

5. Personnaliser

Suivez les instructions ci-dessous pour modifier la taille, la langue et d’autres paramètres.

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

Il peut arriver que le code intégré soit créé par un système CMS et que seule l’URL de publication brute soit nécessaire. Vous pouvez obtenir l’URL d’une publication de deux façons :

Copiez l’URL du lien permanent à partir de la barre d’adresse de votre navigateur.
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.

Via 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 requête à /{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 ordinateur

Vous pouvez ajuster la largeur du lecteur vidéo intégré sur ordinateur à 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 sur le web mobile

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

Modification de la langue

Vous pouvez modifier la langue du plugin Lecteur vidéo intégré en chargeant une version localisée du SDK Facebook pour JavaScript. Lorsque vous chargez le SDK, modifiez la valeur de src pour utiliser votre paramètre régional. Remplacez en_US par votre paramètre régional, par exemple fr_FR pour le français (France) :

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

Vous devrez peut-être modifier la largeur d’un plugin social pour l’afficher dans une autre langue. 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 Lecteur vidéo intégré 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 Lecteur vidéo intégré 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    : '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>

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 Lecteur vidéo intégré !

À propos de la propriété `embed_html` :

Le point de terminaison video de l’API Graph fournit 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 Lecteur vidéo intégré. Nous recommandons de ne plus utiliser cette propriété, mais plutôt le plugin Lecteur vidéo intégré !

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