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>
Comentarios
Disqus comments:
Facebook comments: