amp-youtube - Cara Memasukkan Video Youtube ke AMP HTML
Tutorial yang akan Anda pelajari dibawah ini, mengenai bagaimana menyisipkan (embed) video youtube ke dalam AMP HTML, atau lebih jelasnya, bagaimana posting video youtube di blogger atau wordpress dengan tema atau template AMP.
Quick Example
Contoh
<amp-youtube width="480"
height="270"
layout="responsive"
data-videoid="W70wivX4liU">
</amp-youtube>
Setup
Cara Penggunaan
Langkah Pertama adalah menyisipkan script amp-youtube:
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
Script element tersebut diletakkan pada template atau tema blog Anda, tepatnya diantara <head> dan </head> tag.
Langkah Kedua, tentunya mencari video yang ingin Anda posting dari youtube.com. kemudian cari data-videoid di URL video yang Anda cari tersebut. data-videoid dapat dilihat pada contoh gambar berikut:
Pada contoh gambar tersebut, data-videoid-nya adalah: wT21mmFrCdQ, data-videoid ini, diperlukan untuk mengisi nilai data-videoid attribute didalam amp-youtube.
Langkah Ketiga, menyisipkan element <amp-youtube>...</amp-youtube> dengan contoh di bawah ini:
<amp-youtube width="480"
height="270"
layout="responsive"
data-videoid="DATA_VIDEO_ID_YOUTUBE">
</amp-youtube>
Dari kode diatas, Isi DATA_VIDEO_ID_YOUTUBE dengan data-videoid yang telah dijelaskan pada langkah kedua di atas.
Contoh lengkap dan valid AMP HTML dapat Anda lihat sebagai berikut:
<!doctype html>
<html amp="amp" lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="/example/amp/amp-element/amp-youtube.html" />
<title>amp-youtube demo example - apacara.com</title>
<meta name="author" content="Halwa RF, Fadlullah Fadul" />
<link rel="publisher" href="https://plus.google.com/+HalwaRF" />
<meta name="viewport" content="width=device-width,minimum-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>
<style amp-custom></style>
<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>
</head>
<body>
<amp-youtube width="480"
height="270"
layout="responsive"
data-videoid="W70wivX4liU">
</amp-youtube>
</body>
</html>
Autoplay
Diputar Otomatis
Kita bisa men-set video agar diputar langsung (otomatis) ketika layar browser mengarah ke video yang bersangkutan (layar digulir (scrolled)).
<amp-youtube autoplay
width="480"
height="270"
layout="responsive"
data-videoid="wT21mmFrCdQ">
</amp-youtube>
SHARE