AMP

amp-youtube

Muestra un vídeo de YouTube.

Secuencia de comandos obligatoria<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
Diseños admitidosfill, fixed, fixed-height, flex-item, nodisplay y responsive
EjemplosEjemplo comentado de código de amp-youtube

Ejemplo

Con el diseño responsive (es decir, adaptable), la anchura y la altura del ejemplo deben equivaler a la proporción adecuada para los vídeos con una relación de aspecto 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

autoplaySi este atributo está presente y el navegador admite la reproducción automática:
  • El vídeo se silencia automáticamente antes de que comience la reproducción automática.
  • El vídeo se detiene cuando no se encuentra a la vista.
  • El vídeo continúa reproduciéndose cuando se encuentra a la vista.
  • El sonido del vídeo se activa cuando el usuario toca el vídeo.
  • Si el usuario ha interactuado con el vídeo (por ejemplo, silenciando o activando el sonido, pausando o reanudando el vídeo, etc.) y este se encuentra dentro o fuera de la vista, seguirá en las mismas condiciones en las que se haya dejado. Por ejemplo, si el usuario pausa el vídeo, lo desplaza fuera de la vista y vuelve a él, este seguirá en pausa.
data-videoidID de vídeo de YouTube que aparece en todas las URL de las páginas de vídeos de la plataforma. Por ejemplo, en la URL https://www.youtube.com/watch?v=Z1q71gFeRqM, el ID de vídeo es Z1q71gFeRqM.
data-live-channelidID de canal de YouTube que proporciona una URL de emisión en directo estable. Por ejemplo, en la URL https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q, el ID de canal es UCB8Kb4pxYzsDsHxzBfnid4Q. Puedes incluir un atributo data-live-channelid en lugar de data-videoid para insertar una URL estable de la emisión en directo en lugar de un vídeo. Los canales no incluyen marcadores de posición predeterminados. Puedes proporcionar un marcador de posición para el vídeo siguiendo el ejemplo 2, que aparece más arriba.
data-param-*Todos los atributos data-param-* se añadirán como parámetros de consulta al iframe src de YouTube. Esto se puede utilizar para transferir valores personalizados a los complementos de YouTube; por ejemplo, para mostrar controles. Las claves y los valores se codificarán mediante URI. Las claves alternarán mayúsculas y minúsculas (camel case).
  • `data-param-controls=1` se convierte en `&controls=1`
Para conocer más opciones de parámetros de YouTube, consulta la página sobre los parámetros del reproductor insertado de esta plataforma.
dockRequiere la extensión amp-video-docking. Si este atributo está presente y el vídeo se reproduce manualmente, se minimizará y permanecerá fijado en una esquina o elemento cuando el usuario se desplace fuera del área visual del componente de vídeo. Para obtener más información, consulta la documentación de la propia extensión.
credentials (opcional)Define una opción credentials tal y como especifica la API de Fetch.
  • Valores admitidos: `omit` e `include`
  • Predeterminado: `include`
Si quieres utilizar el reproductor de YouTube en el modo de mejora de la privacidad, pasa el valor de omit. Normalmente, YouTube añade sus cookies cuando se carga el reproductor. En el modo de mejora de la privacidad, las cookies se añaden cuando el usuario hace clic en el reproductor.
common attributesEste elemento incluye atributos comunes que se aplican a los componentes de AMP.

Validación

Consulta las reglas de amp-youtube en la especificación de la herramienta de validación de AMP.

¿Necesitas más ayuda?

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.

Go to 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.

Go to GitHub