Índice

amp-youtube

You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

Exibe um vídeo do YouTube.

Required Scripts

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Supported Layouts

fill fixed fixed-height flex-item nodisplay responsive

Exemplos

amp-addthis amp-youtube Product Page Integrating Videos in AMP an Overview Video Carousels with amp-carousel

Exibe um vídeo do YouTube.

Script obrigatório	`<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>`
Layouts compatíveis	fill, fixed, fixed-height, flex-item, nodisplay, responsive
Exemplos	Exemplo de código com notas para amp-youtube

Exemplo

Com o layout responsivo, a largura e a altura do exemplo geram layouts corretos para vídeos com proporção de 16:9:

<amp-youtube
    data-videoid="mGENRKrdoGY"
    layout="responsive"
    width="480" height="270"></amp-youtube>

  <amp-youtube
      id="myLiveChannel"
      data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q"
      width="358"
      height="204"
      layout="responsive">
    <amp-img
      src="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg"
      placeholder
      layout="fill"
      />
  </amp-youtube>

Atributos

autoplay	Se este atributo estiver presente e o navegador for compatível com a reprodução automática: o vídeo será silenciado automaticamente antes do início da reprodução automática; quando o vídeo for rolado para fora da visualização, o ele será pausado; quando o vídeo for rolado para dentro da visualização, a reprodução será retomada; quando o usuário tocar no vídeo, o áudio será ativado; se o usuário tiver interagido com o vídeo (por exemplo, desativar/ativar som, pausar/retomar etc.), e o vídeo for rolado para dentro ou fora da visualização, o estado dele permanecerá como o usuário o deixou. Por exemplo, se o usuário pausar o vídeo, depois rolá-lo para fora da visualização e retornar para ele, o vídeo continuará pausado.
data-videoid	O ID do vídeo do YouTube encontrado em todos os URLs de páginas de vídeo desse serviço. Por exemplo, no URL https://www.youtube.com/watch?v=Z1q71gFeRqM, `Z1q71gFeRqM` é o ID do vídeo.
data-live-channelid	O ID do canal do YouTube que fornece um URL estável de transmissão ao vivo. Por exemplo, no URL https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q, `UCB8Kb4pxYzsDsHxzBfnid4Q` é o ID do canal. Você pode fornecer um atributo `data-live-channelid`, em vez de `data-videoid`, para incorporar um URL estável para uma transmissão ao vivo, e não de um vídeo. Os canais não vêm com os marcadores padrão. Você pode fornecer um marcador para o vídeo, conforme o exemplo 2 acima.
data-param-*	Todos os atributos `data-param-*` serão adicionados como parâmetros de consulta ao src de iframe do YouTube. Isso pode ser usado para transmitir valores personalizados por meio de plug-ins do YouTube, como, por exemplo, para definir se os controles serão exibidos ou não. As chaves e os valores serão codificados na URI. As chaves serão em CamelCase. `data-param-controls=1` se transforma em `&controls=1` Consulte Parâmetros do player incorporado do YouTube para ver mais opções de parâmetros do YouTube.
dock	Requer a extensão `amp-video-docking`. Se esse atributo estiver presente e o vídeo estiver sendo reproduzido manualmente, o vídeo será minimizado e fixado em um canto ou elemento quando o usuário rolar para fora da área visual do componente de vídeo. Para mais detalhes, consulte a documentação sobre a extensão de âncora (link em inglês).
credentials (opcional)	Define uma opção de `credentials`, conforme especificado pela API Fetch. Valores aceitos: `omit`, `include` Padrão: `include` Se você quer usar o player do YouTube no modo de privacidade aprimorada, passe o valor de `omit`. Normalmente, o YouTube define os cookies quando o player é carregado. No modo de privacidade aprimorada, os cookies são definidos quando o usuário clica no player.
common attributes	Este elemento inclui atributos comuns estendidos a componentes de AMP.

Validação

Consulte as regras do amp-youtube (link em inglês) nas especificações do validador de AMP. ,false,false

Precisa de mais ajuda?

Você já leu este documento várias vezes, mas ainda ficou com dúvidas sem respostas? Talvez outras pessoas pensem da mesma forma. Procure entrar em contato com elas no Stack Overflow.

Ir para o Stack Overflow

Encontrou um bug ou sente falta de um recurso?

O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.

Ir para o GitHub

amp-youtube 1.0 0.1