Video y reproductor de video en vivo insertados

El reproductor de video insertado te permite agregar videos de Facebook y videos en vivo de Facebook a tu sitio web muy fácilmente. Puedes usar cualquier video público, publicado por una página o persona como origen de video o video en vivo.

Configurador del reproductor de video insertadoEjemplo de códigoConfiguraciónAgregar código manualmente

Paso a paso

1. Elegir una URL o una página

Elige la URL del video 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 "Obtener código" para generar el código del reproductor de video insertado.

3. Copiar y pegar el fragmento de código HTML

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

Configurador del reproductor de video insertado

URL del video
Ancho en píxeles del video

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

Configuración

El configurador anterior no incluye todas las configuraciones posibles del reproductor de video insertado. También puedes modificar las opciones siguientes:

Configuración Descripción Valor predeterminado

data-href

La URL absoluta del video.

n/a

data-allowfullscreen

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

false

data-autoplay

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

false

data-width

El ancho del contenedor de video. Mínimo de 220px.

auto

data-show-text

Si se configura en true, incluye el texto de las publicaciones de Facebook asociadas con el video, si las hay. Solo disponible para sitios web para computadoras

false

data-show-captions

Si se configura en true se muestran los subtítulos (si los hay) de manera predeterminada. Los subtítulos solo se muestran en la computadora.

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 video

1. Ir a la publicación con video

Si publicas un video público (ver preguntas frecuentes), puedes obtener el código de inserción directamente desde la propia publicación con video.

Elige Embed Video en el menú "Opciones":

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

Solo para páginas

Si publicas un video 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. Copiar y pegar el código

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

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

Agregar código manualmente

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

1. Obtener la URL de la publicación con video

En primer lugar, debes obtener la URL de la publicación con video que deseas compartir. Esta publicación con video 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. Cargar el SDK para JavaScript

Para usar el plugin del reproductor de video insertado o cualquier otro plugin social, debes agregar 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 SDK para JavaScript: inicio rápido.

3. Colocar la etiqueta del reproductor de video insertado

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

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

4. Pruebas

Tras completar estos pasos, podrás probar el reproductor de video 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. Personalizar

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 video

Es posible que, en determinadas situaciones, el código de inserción 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 de la publicación 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 video insertado en un sitio web, probablemente agregarás los videos con la API Graph. Por ejemplo, puedes usar el extremo de la API de videos 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 video:

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 videos insertados. Para obtener más información sobre este tema, consulta la sección de preguntas frecuentes.

Diseño en la computadora

Para ajustar el ancho del reproductor de video insertado en la computadora, 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 video se reproduzca en modo de pantalla completa, agrega la propiedad data-allowfullscreen="true".

Diseño en la web móvil

En la web móvil, el reproductor de video 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, cambia el valor de js.src para usar la configuración regional. Reemplaza en_US con la configuración regional. Por ejemplo, fr_FR para francés (Francia):

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

El archivo Facebook Locales XML contiene las configuraciones regionales que se admiten. Posiblemente, deberás ajustar el ancho del plugin social para adaptarlo a las distintas configuraciones regionales. Para obtener más información, visita la página Localización y traducción.

WordPress

Si ya integraste el SDK de Facebook para JavaScript en un sitio de Wordpress y deseas usar el plugin del reproductor de video insertado, solo tendrás que agregar 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 video con el fragmento de código "copy&paste" (que puedes obtener en las distintas publicaciones con video), lo más probable es que no se represente el plugin del reproductor de video insertado, porque Wordpress convertirá todos los caracteres & en #038; y se interrumpirá la actividad del reproductor.

En su lugar, agrega 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 de la API Graph video?

No, no debes usar la propiedad embed_html. En su lugar, usa el plugin del reproductor de video 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 no se puede insertar en una página web para reproducir el video solicitado.

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

Si usas el valor de la propiedad embed_html, el reproductor de video:

  • No funcionará en tabletas y dispositivos móviles.
  • No mostrará información adicional, como las reproducciones, el título del video, 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>"
}