Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
PT
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Русский Türkçe 中文 Polski Tiếng việt

amp-youtube

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

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 &amp;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