Amp-youtube
Video YouTube dalam file HTML AMP
1 Kode
<!doctype html> <html ⚡> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script>
2 Disposisi
Impor komponen amp-youtube setelah dibuka <head>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
Video Tutorial
3 Penggunaan dasar
Sematkan video YouTube melalui identifikasi video. Identifikasi ditemukan di semua halaman video YouTube, hanya gunakan ID.
Kode
<amp-youtube width="480" height="270" layout=responsive data-videoid="lBTCB7yLs8Y"> </amp-youtube>
Demonstrasi
4 Auto reproduksi
Jika Anda menambah kode autoplay itu akan diputar secara otomatis.
Video YouTube secara otomatis dinonaktifkan sebelum memulai pemutaran otomatis, ketika pengguna menekan video, video diaktifkan dan video diputar audio.
Jika pengguna telah berinteraksi dengan video YouTube (misalnya, Diam / Pulihkan, jeda, dll.), dan video bergerak tidak terlihat, status video tetap pada cara pengguna meninggalkannya.
Kode:
<amp-youtube width="480" height="270" layout=responsive data-videoid="lBTCB7yLs8Y" autoplay> </amp-youtube>
Demo
Kemudian struktur kode lengkap
<!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>