Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


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:

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:

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:

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

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.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies

Centro de preferencias de privacidad

Cookies imprescindibles

para medir la audiencia

ga,gdpr