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.
É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é
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 |
---|---|---|
| L’URL absolue de la vidéo. |
|
| Autorise la lecture de la vidéo en plein écran. Peut être |
|
| 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 |
|
|
|
|
| La largeur du conteneur vidéo. La valeur minimale est |
|
| Définissez ce paramètre sur |
|
| Définissez ce paramètre sur |
|
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&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é video
embed_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>" }