Contenido

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

Muestra un vídeo de 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

Ejemplos

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

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 admitidos	fill, fixed, fixed-height, flex-item, nodisplay y responsive
Ejemplos	Ejemplo 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

autoplay	Si 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-videoid	ID 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-channelid	ID 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.
dock	Requiere 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 attributes	Este 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.

¿Necesita ayuda adicional?

¿Ha leído este documento una docena de veces pero realmente no responde todas sus preguntas? Quizás otras personas piensen lo mismo: póngase en contacto con ellas en Stack Overflow.

Ir a Stack Overflow

¿Encontró un error o considera que falta una función?

¡El proyecto AMP alienta profundamente su participación y contribuciones! Esperamos que se convierta en un miembro permanente de nuestra comunidad de código abierto, pero también agradecemos las contribuciones esporádicas sobre los temas que le apasionan especialmente.

Ir a GitHub

amp-youtube 1.0 0.1