AMP Conf 2020: Save the date!
AMP
PT
English Français العربية Español Italiano Indonesia 日本語 한국어 Русский Türkçe 中文

amp-youtube

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

Examples

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

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?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Ir para Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Ir para o GitHub