amp-youtube: Insertar vídeos de Youtube en AMP

Sencillo post en el que vamos a ver cómo insertar vídeos de Youtube en AMP con la etiqueta amp-youtube.

Otros post interesantes sobre AMP son:

• AMP-img: Cómo añadir imágenes en la versión AMP de tu web
• Cómo referenciar a la versión AMP de una URL
• Cómo validar páginas AMP de forma rápida y eficaz
• Cómo configurar Google Analytics en AMP de manera fácil

Sintaxis de la etiqueta amp-youtube para insertar vídeos de Youtube en AMP

Veamos la sintaxis extraída de su web oficial:

Esta es la sintaxis básica para insertar el vídeo, solo tenemos que definir:

• La anchura con el atributo width.
• La altura con el atributo height.
• Con el atributo layout definimos que el player sea responsive (Recomendado).
• El atributo data-videoid define el id del vídeo a mostrar, lo obtenemos de la url del vídeo con el parámetro v –> https://www.youtube.com/watch?v=GFv5z1l94uU

Por último tenemos que añadir la siguiente librería a nuestra página:

Quizás os resulte últil saber el marcado básico de AMP:

• Etiquetado AMP básico y obligatorio de una página para ser válida

Atributos autoplay y data-live-channelid de la etiqueta amp-youtube

Vamos a repasar estos 2 atributos disponibles que pueden ser interesantes:

• autoplay
• data-live-channelid

Con autoplay:

• El vídeo está silenciado antes de que comience a reproducirse
• Cuando el vídeo desaparece haciendo scroll, este se para.
• Cuando el vídeo vuelve a aparecer al hacer scroll, este vuelve a reproducirse.
• Cuando se toca (clicka) el vídeo, este vuelve a tener sonido.
• El estado con el que ha dejado el usuario el vídeo permanece intacto mientras se continúa navegando por la web aunque no se vea en el scroll. Por ejemplo, si el usuario dejó el vídeo pausado, este continuará así y no comenzará automáticamente cuando se vuelva a ver.

Repasemos la funcionalidad del atributo data-live-channelid:

• El data-live-channelid define la dirección de un canal de streaming por Youtube.
• Por ejemplo, en esta URL: https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q, UCB8Kb4pxYzsDsHxzBfnid4Q es eñ parámetro que debemos poner.
• data-live-channelid sustituye al parámetro data-videoid en los casos de vídeo en directo.

Ejemplos de la etiqueta amp-youtube para insertar vídeos de Youtube en AMP

Vayamos a ver este sencillo ejemplo de amp-youtube:

En el código superior tenemos 2 casos:

• Uno similar al de la sintaxis en el que ponemos un vídeo normal de Youtube.
• En el segundo, tenemos el mismo vídeo pero con autoplay.

Para finalizar solo nos quedaría validar la URL en el validador de AMP.