Como aplicar los videos de YouTube en AMP html


Amp-youtube


Videos de YouTube incrustados en sus archivos HTML AMP

1 Código

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>


2 Disposición

Importe el componente amp-youtube después de la apertura <head>

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>


Video Tutorial



3 Uso básico

Incrustar vídeos de YouTube a través de la identificación de video. La identificación se encuentra en todas las páginas de vídeo de YouTube, use solo el ID.

Código

 <amp-youtube width="480"
      height="270"
      layout=responsive
      data-videoid="lBTCB7yLs8Y">
  </amp-youtube>


Demostración


4 Auto reproducción

Si aumente el código autoplay se reproducirá automáticamente.

El video de YouTube se silencia automáticamente antes de iniciar la reproducción automática, cuando el usuario pulsa el vídeo, el vídeo se activa y se reproduce el audio.

Si el usuario ha interactuado con el vídeo de YouTube (por ejemplo, Silencia / restablece, hace una pausa, etc.), y el video se desplaza fuera de la vista, el estado del vídeo permanece en la forma en que el usuario lo dejó.

Código:

  <amp-youtube width="480"
      height="270"
      layout=responsive
      data-videoid="lBTCB7yLs8Y"
      autoplay>
  </amp-youtube>


Demostración


A continuación la estructura completa del código


<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<link rel="canonical" href="http://amphtmlejemplos.blogspot.com/2016/12/como-aplicar-los-videos-de-youtube-en-amp.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<amp-youtube width="480"
      height="270"
      layout=responsive
      data-videoid="lBTCB7yLs8Y">
  </amp-youtube>
<amp-youtube width="480"
      height="270"
      layout=responsive
      data-videoid="lBTCB7yLs8Y"
      autoplay>
  </amp-youtube>
</body>
</html>


Share:

Related post

Disqus

Disqus comments:


Facebook

Facebook comments: