amp-youtube

Ho to add Youtube video in AMP

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.