Persiapan pertama sebelum menampilkan video Youtube di laman AMP adalah Anda harus menambahkan JS library amp-youtube di blog Anda. Agar lebih rapi kami mengumpulkan semua JS library di kelompok <!-- JavaScript Google AMP -->, temukan kode tersebut pada tag <head> blog Anda.
<script async custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-1.0.js'/>
Menambahkan Video Youtube ke Halaman AMP
Salid ID video yang ingin Anda tampilkan. Untuk mendapatkannya cek di bagian url video tersebut:
youtube.com/watch?v=xxxxxxxxxxx
Tempelkan ID video yang Anda dapat pada tag di bawah ini:
<amp-youtube data-videoid='xxxxxxxxxxx' layout='responsive' width='480' height='270'></amp-youtube>
Layout yang didukung untuk tag ini adalah: fill, fixed, fixed-height, nodisplay dan responsive. Dengan tata letak responsif, lebar dan tinggi pada contoh di atas akan menghasilkan tata letak video yang benar dengan aspek rasio 16:9.
Fitur Putar Otomatis
Setelan autoplay akan otomatis memutar/menjeda video ketika halaman di scroll in/out pada layar browser tertentu, video akan otomatis dibisukan ketika autoplay dimulai dan suara hanya muncul ketika user melakukan klik/tap pada video tersebut.
Fitur ini mungkin tidak didukung pada browser lama, tetapi jika ingin mencobanya silahkan tambahkan atribut autoplay='autoplay' pada tag <amp-youtube>, contoh:
<amp-youtube autoplay='autoplay' data-videoid='xxxxxxxxxxx' layout='responsive' width='480' height='270'></amp-youtube>
Anda bisa membaca di situs resmi nya untuk mencari tahu lebih lanjut tentang amp-youtube.
