amp-youtube
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.
The first preparation before displaying Youtube videos on AMP pages is that you must add amp-youtube JS library on your blog. To make it neater we collected all the JS libraries in <!-- Google AMP JavaScript --> group, find the code in <head> tag of your blog.
<script async custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-1.0.js'/>
Adding Youtube Videos to AMP Pages
Copy the ID video you want to display. To get it, check url of the video:
youtube.com/watch?v=xxxxxxxxxxx
Paste the ID video you got in the tag below:
<amp-youtube data-videoid='xxxxxxxxxxx' layout='responsive' width='480' height='270'></amp-youtube>
The supported layouts for this tag are: fill, fixed, fixed-height, nodisplay and responsive. With the responsive layout, width and height in the example above will result in a properly layout video with an aspect ratio of 16:9.
Auto Play Feature
The autoplay setting will automatically play/pause video when the page is scrolled in/out on certain browser screens, the video will be automatically muted when autoplay starts and sound will appears when user clicks/taps on the video.
This feature may not be supported on older browsers, but if you want to try it add autoplay='autoplay' attribute to the <amp-youtube> tag, for example:
<amp-youtube autoplay='autoplay' data-videoid='xxxxxxxxxxx' layout='responsive' width='480' height='270'></amp-youtube>
You can read on the official website to find out more about amp-youtube.