Vídeo e player de vídeo ao vivo incorporados

Com o player de vídeo incorporado, você pode facilmente adicionar vídeos do Facebook e vídeos ao vivo do Facebook em seu site. Você pode usar como origem do vídeo ou do vídeo ao vivo qualquer publicação de vídeo pública feita por uma Página ou pessoa.

Configurador do player de vídeo incorporadoExemplo de códigoConfiguraçõesAdicionar código manualmente

Passo a passo

1. Escolha a URL ou Página

Use o URL de um vídeo do Facebook que você pretende incorporar.

2. Configurador de código

Cole a URL no Configurador de código e clique no botão "Obter código" para gerar o código do player de vídeo incorporado.

3. Copie e cole o trecho de código no HTML

Copie e cole o trecho de código no HTML do site de destino.

Configurador do player de vídeo incorporado

URL do vídeo
A largura do pixel do vídeo

Exemplo de código completo

Copie e cole o exemplo de código no seu site. Ajuste o valor de data-href para o URL do vídeo. Controle o tamanho do player usando o 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 = "//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>

Configurações

O configurador acima não inclui todas as configurações possíveis para o player de vídeo incorporado. Também é possível alterar as seguintes configurações:

Configuração Descrição Padrão

data-href

O URL absoluto do vídeo.

n/a

data-allowfullscreen

Permite que o vídeo seja reproduzido em tela cheia. Pode ser false ou true.

false

data-autoplay

Começa automaticamente a reprodução do vídeo quando a página é carregada. O vídeo será reproduzido sem som (silenciado). A pessoa pode ativar o som nos controles do player de vídeo. Essa configuração não se aplica aos dispositivos móveis. Pode ser false ou true.

false

data-width

A largura do contêiner do vídeo. Mínimo 220px.

auto

data-show-text

Defina como true para incluir o texto da publicação do Facebook associada ao vídeo, se houver. Disponível apenas para sites de desktop.

false

data-show-captions

Defina como true para mostrar legendas (se disponível) por padrão. As legendas só estão disponíveis no desktop.

false

Exemplo de configuração

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

Como obter o código de uma publicação de vídeo

1. Navegue até a publicação de vídeo

Se você publicar um vídeo como público (confira as Perguntas frequentes), poderá obter o código de incorporação diretamente na publicação do vídeo.

Escolha Embed Video no menu de opções:

Ou, quando assistir a um vídeo na visualização de página inteira, selecione o botão Embed Video no canto inferior direito:

Apenas para Páginas

Quando você publicar um vídeo público em uma Página (confira as Perguntas frequentes), poderá obter o código de incorporação na Linha do Tempo. Clique no ícone que aparece no canto superior direito da publicação no Facebook.

Escolha Embed Video no menu suspenso: (Apenas para Páginas)

2. Copie e cole o código

Aparecerá uma caixa de diálogo com o código para incorporar a publicação de vídeo. Copie e cole esse código na sua página da Web, no ponto onde você quer que ele apareça.

Para ver os detalhes técnicos, consulte a seção Adicionar código manualmente

Adicionar código manualmente

Além de usar o Gerador de Códigos, também é possível incorporar o código manualmente.

1. Obter o URL da publicação de vídeo

Primeiro é necessário obter o URL da publicação do vídeo que você deseja compartilhar. A publicação do vídeo deve ter o status de público (confira as Perguntas frequentes), que é indicado pelo ícone de globo cinza, localizado ao lado do horário da publicação:

Para fins de teste, você pode usar esta URL de exemplo:

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

2. Carregue o JavaScript SDK

Para usar o plugin do player de vídeo incorporado ou qualquer outro Plugin Social, é preciso adicionar o SDK do Facebook para JavaScript ao seu site. Você só precisa carregar o SDK na página uma vez; o ideal é que ele fique após a tag de abertura <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>

Para receber mais ajuda na implementação do JavaScript SDK, consulte JavaScript SDK — Início rápido.

3. Posicione a tag do player de vídeo incorporado

Depois, posicione a tag do player de vídeo incorporado em qualquer ponto do seu site. Substitua {your-video-post-url} pela URL da publicação.

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

4. Teste

Depois de concluir essas etapas, você pode testar o player de vídeo incorporado. A integração completa será mais ou menos assim:

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

A captura de tela abaixo mostra o resultado do nosso exemplo de teste.

5. Personalize

Siga as instruções mais abaixo na página para alterar o tamanho, o idioma e outras configurações.

Como obter o URL da publicação do vídeo

Em alguns casos, o código incorporado é criado por um CMS e você só precisa da URL bruta da publicação. Existem duas formas de obter a URL da publicação:

  1. Copie a URL do link permanente na barra de endereços do navegador.
  2. Clique com o botão direito no horário de publicação e copie o endereço do link.

Ambos os métodos estão destacados em vermelho na captura de tela abaixo.

Pela Graph API

Se você quiser integrar automaticamente os players de vídeo incorporados ao seu site, provavelmente usará a Graph API para agregar vídeos. Por exemplo, você pode usar o endpoint da API de vídeos da página, que enviará uma resposta para a sua solicitação de /{page-id}/videos no seguinte formato (reduzido):

{
  "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 obter a URL do vídeo:

Use o valor id para criar um URL com a seguinte estrutura:

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

Não use a propriedade embed_html para incorporar vídeos. Para saber mais sobre esse assunto, consulte a seção Perguntas frequentes

Layout no computador

É possível ajustar a largura do player de vídeo incorporado no computador através do atributo data-width da tag do player de vídeo incorporado, como no exemplo abaixo. O valor precisa ser no mínimo 220. Não há limite máximo, mas o player nunca será maior do que seu elemento pai.

Não use tags de estilo CSS para ajustar o tamanho de um plugin. Isso pode causar erros de exibição.

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

Tela cheia

É possível adicionar a propriedade data-allowfullscreen="true" para permitir que o vídeo seja reproduzido em tela cheia.

Layout na Web móvel

Na Web móvel, o player de vídeo incorporado é automaticamente redimensionado para a largura interna de seu elemento pai.

Alterar idioma

É possível alterar o idioma do plugin de player de vídeo incorporado carregando a versão localizada do SDK do Facebook para JavaScript. Quando você carregar o SDK, altere o valor js.src para usar sua localidade: Basta substituir en_US pela sua localidade, por exemplo, fr_FR para usar francês (França):

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

As localidades compatíveis estão listadas no arquivo XML de localidades do Facebook. Talvez você tenha que ajustar a largura do Plugin Social para acomodar idiomas diferentes. Para saber mais, consulte nossa página Localização e tradução.

Wordpress

Caso você já use o SDK do Facebook para JavaScript em seu site do Wordpress, pode usar o plugin do player de vídeo incorporado simplesmente acrescentando a tag fb-video à sua publicação:

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

Caso você não esteja usando o SDK do Facebook para JavaScript e incorpore o vídeo pelo trecho de código de copiar e colar que pode ser obtido na própria publicação de vídeo, o plugin do player de vídeo incorporado provavelmente não será renderizado, porque o Wordpress converterá todos os caracteres & para #038; e interromperá o player.

Em vez de fazer isso, use este código para adicionar o plug-in:

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

Uma nova integração mais simples com o Wordpress será lançada em breve.

Perguntas frequentes

Posso usar a propriedade video da Graph API embed_html?

Não, não use a propriedade embed_html. Em vez de fazer isso, use o plugin do player de vídeo incorporado!

Sobre a propriedade embed_html:

O ponto de extremidade da Graph API video fornecerá a propriedade embed_html. Seu valor terá um elemento HTML que poderá ser incorporado a uma página da Web para reproduzir o vídeo solicitado.

Não confunda esse valor com o plugin do player de vídeo incorporado. Recomendamos não usar mais essa propriedade. Em vez dela, use o plugin do player de vídeo incorporado!

Se você usar o valor da propriedade embed_html, o player de vídeo:

  • Não funcionará em celulares e tablets
  • Não conterá informações adicionais, como visualizações, título do vídeo, etc.

Exemplo da propriedade embed_html (obsoleta):

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