Reproductor de vídeo (incluido el vídeo en directo) insertado

El reproductor de vídeo insertado permite añadir muy fácilmente vídeos de Facebook (incluidos los vídeos en directo) a un sitio web. Puedes usar como fuente de vídeo o vídeo en directo cualquier vídeo público que una persona o una página hayan publicado.

Configurador del reproductor de vídeo insertadoEjemplo de códigoAjustesAñadir código manualmente

Paso a paso

1. Elige una URL o una página

Elige la URL del vídeo de Facebook que quieres insertar.

2. Configurador de código

Pega la URL en el configurador de código y haz clic en el botón Get Code para generar el código del reproductor de vídeo insertado.

3. Copia y pega el fragmento de código HTML

Copia y pega el fragmento de código en el código fuente HTML del sitio web de destino.

Configurador del reproductor de vídeo insertado

URL del vídeo
La anchura del píxel del vídeo

Ejemplo de código completo

Copia y pega el ejemplo de código en el sitio web. Ajusta el valor data-href para la URL del vídeo. Puedes controlar el tamaño del reproductor con el atributo 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 = "https://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>

Ajustes

El configurador anterior no incluye todas las configuraciones posibles del reproductor de vídeo insertado. También puedes modificar los ajustes siguientes:

Ajuste Descripción Valor predeterminado

data-href

La URL absoluta del vídeo.

n/a

data-allowfullscreen

Permite la reproducción del vídeo en modo de pantalla completa. Puede ser false o true.

false

data-autoplay

Inicia automáticamente la reproducción del vídeo cuando se carga la página. El vídeo se reproducirá sin sonido (silenciado). El sonido puede activarse con los controles del reproductor de vídeo. Esta configuración no se aplica a los dispositivos móviles. Puede ser false o true.

false

data-width

El ancho del contenedor de vídeo. 220px como mínimo.

auto

data-show-text

Establécelo como true para incluir el texto asociado al vídeo de la publicación de Facebook, de haberlo. Solo disponible para sitios web para ordenadores.

false

data-show-captions

Establécelo como true para mostrar epígrafes, en caso de que los haya, de forma predeterminada. Los epígrafes solo están disponibles para ordenadores.

false

Configuración de ejemplo

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

Obtener el código de una publicación con vídeo

1. Ve a la publicación con vídeo

Si publicas un vídeo público (ver preguntas frecuentes), puedes obtener el código insertado directamente desde la propia publicación con vídeo.

Elige Embed Video en el menú "Opciones":

O bien, si estás viendo el vídeo a pantalla completa, selecciona el botón Embed Video en la esquina inferior derecha:

Solo para páginas

Si publicas un vídeo público en una página (ver preguntas frecuentes), puedes obtener el código de inserción directamente desde la biografía. Haz clic en el icono que aparece en la esquina superior derecha de la publicación en Facebook.

Elige Embed Video en el menú desplegable: (solo para páginas):

2. Copia y pega el código

Aparecerá un cuadro de diálogo con el código necesario para insertar la publicación con vídeo. Copia y pega este código en la página web donde deseas que aparezca el vídeo.

Para obtener más información sobre detalles técnicos, consulta la sección siguiente, Añadir código manualmente.

Añadir código manualmente

Puedes insertar el código con el generador de códigos y también manualmente.

1. Obtén la URL de la publicación con vídeo

En primer lugar, debes obtener la URL de la publicación con vídeo que deseas compartir. Esta publicación debe ser pública (ver preguntas frecuentes), lo que se indica con el icono del mundo gris que se muestra junto a la hora de publicación correspondiente:

A modo de prueba, puedes usar esta URL de ejemplo:

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

2. Carga el SDK para JavaScript

Para usar el plugin del reproductor de vídeo insertado o cualquier otro plugin social, debes añadir el SDK de Facebook para JavaScript al sitio web. Solo tendrás que cargar el SDK una vez en cada página, preferentemente tras la etiqueta de apertura <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 = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Para obtener más información sobre cómo implementar el SDK para JavaScript, consulta Inicio rápido: SDK de Facebook para JavaScript.

3. Coloca la etiqueta del reproductor de vídeo insertado

A continuación, coloca la etiqueta del reproductor de vídeo insertado en cualquier ubicación del sitio web. Reemplaza {your-video-post-url} por la URL de la publicación.

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

4. Prueba

Tras completar estos pasos, podrás probar el reproductor de vídeo insertado. Cuando la integración se complete, obtendrás un código similar al siguiente:

<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 = "https://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>

En la captura de pantalla siguiente se muestra el resultado del ejemplo de prueba.

5. Personaliza

Sigue las instrucciones que aparecen más adelante en esta página para ajustar el tamaño, el idioma y otras opciones.

Obtener la URL de una publicación con vídeo

Es posible que, en determinadas situaciones, el código insertado se haya creado a través de CMS y solo necesites la URL de la publicación sin procesar. Puedes obtener la URL de una publicación de dos formas:

  1. Copia la URL del enlace permanente en la barra de direcciones del navegador.
  2. Haz clic con el botón derecho en la hora de publicación correspondiente y copia la dirección del enlace.

Ambos métodos se destacan en rojo en la captura de pantalla siguiente.

A través de la API Graph

Si deseas integrar automáticamente los reproductores de vídeo insertado en un sitio web, probablemente añadirás los vídeos con la API Graph. Por ejemplo, puedes usar el extremo de la API de vídeos de página, que enviará la respuesta a tu solicitud a /{page-id}/videos, con el formato siguiente (abreviado):

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

Para obtener la URL del vídeo:

Usa el valor id para crear una URL con la estructura siguiente:

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

No uses la propiedad embed_html para vídeos insertados. Para obtener más información sobre este tema, consulta la sección de preguntas frecuentes.

Diseño en el ordenador

Para ajustar el ancho del reproductor de vídeo insertado en el ordenador, coloca el atributo data-width en la etiqueta del reproductor, tal como se muestra en el ejemplo siguiente. El valor mínimo es 220. No se aplica ningún límite al valor máximo porque el reproductor nunca será mayor que su correspondiente elemento principal.

No uses etiquetas de estilo CSS para ajustar el tamaño de un plugin porque pueden generar errores de visualización.

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

Pantalla completa

Si deseas permitir que el vídeo se reproduzca en modo de pantalla completa, añade la propiedad data-allowfullscreen="true".

Diseño en la web móvil

En la web móvil, el reproductor de vídeo insertado se ajusta automáticamente al ancho interior de su correspondiente elemento principal.

Cambiar el idioma

Para cambiar el idioma del plugin del reproductor de video insertado, carga una versión localizada del SDK de Facebook para JavaScript. Cuando lo hagas, ajusta el valor js.src para usar tu idioma: solo tienes que reemplazar en_US con tu código de idioma. Por ejemplo, fr_FR para francés (Francia):

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

Puedes consultar los idiomas que se admiten en el archivo FacebookLocales.xml. Posiblemente, deberás ajustar el ancho del plugin social para adaptarlo a los distintos idiomas. Para obtener más información, visita la página Localización y traducción.

Wordpress

Si ya has integrado el SDK de Facebook para JavaScript en un sitio de Wordpress y deseas usar el plugin del reproductor de vídeo insertado, solo tendrás que añadir la etiqueta fb-video a la publicación:

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

Si no usas el SDK de Facebook para JavaScript e insertas un vídeo con el fragmento de código "copy&paste" (que puedes obtener en las distintas publicaciones con vídeo), lo más probable es que no se represente el plugin del reproductor de vídeo insertado, porque Wordpress convertirá todos los caracteres & en #038; y se interrumpirá la actividad del reproductor.

En su lugar, añade el plugin con el código siguiente:

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

Próximamente se publicará una nueva integración con Wordpress muy fácil de usar.

Preguntas frecuentes

¿Puedo usar la propiedad embed_html del extremo video de la API Graph ?

No, no debes usar la propiedad embed_html. En su lugar, usa el plugin del reproductor de vídeo insertado.

Acerca de la propiedad embed_html:

El extremo de API Graph video proporcionará la propiedad embed_html. Su valor contendrá un elemento HTML que se puede insertar en una página web para reproducir el vídeo solicitado.

Este valor no debe confundirse con el plugin del reproductor de vídeo insertado. Te recomendamos no volver a usar esta propiedad en el futuro. En su lugar, usa el plugin del reproductor de vídeo insertado.

Si usas el valor de la propiedad embed_html, el reproductor de vídeo:

  • No funcionará en tabletas y dispositivos móviles.
  • No mostrará información adicional, como las reproducciones, el título del vídeo, etc.

Ejemplo de la propiedad embed_html (obsoleto):

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