amp-youtube
How to add Youtube video in AMP platform.
Install JS libraries
In order to play Youtube videos on the AMP platform, make sure the JS Library/script for <amp-youtube> is installed, to make it easier to find, we group all AMP scripts in <!-- Javascript Google AMP --> which is placed in the <head> tag.
<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 video ID that you want to display, the video ID can be taken from the video url, for example:
youtube.com/watch?v=0000000000
Paste the copied video ID into the tag below:
<amp-youtube data-videoid='0000000000' layout='responsive' width='480' height='270'></amp-youtube>
The supported layouts for this tag are: fill, fixed, fixed-height, nodisplay and responsive. With a responsive layout, the width and height as in the example above will result in a video with aspect ratio 16:9, see more on external link.
Autoplay feature
The autoplay setting will automatically play the video when it enters the viewport and will stop when it passes. By default, autoplayed videos will be muted and the audio will only appear when the user clicks/taps on the video.
This feature may not be supported on older browsers, but to try it add the autoplay='autoplay' attribute to the <amp-youtube> tag, for example:
<amp-youtube autoplay='autoplay' data-videoid='0000000000' layout='responsive' width='480' height='270'></amp-youtube>
Install JS library
Agar dapat memutar video Youtube di platform AMP, pastikan JS Library/script untuk <amp-youtube> sudah terinstal, agar lebih mudah ditemukan, kami mengelompokkan semua script AMP di <!-- Javascript Google AMP --> yang diletakkan di tag <head>.
<script async custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-1.0.js'/>
Menambahkan video Youtube ke halaman AMP
Salin ID video yang ingin Anda tampilkan, ID video dapat diambil dari url video, misalnya:
youtube.com/watch?v=0000000000
Tempelkan ID video yang telah disalin ke dalam tag di bawah ini:
<amp-youtube data-videoid='0000000000' layout='responsive' width='480' height='270'></amp-youtube>
Tata letak yang didukung untuk tag ini adalah: fill, fixed, fixed-height, nodisplay, dan responsive. Dengan tata letak responsive, lebar dan tinggi seperti pada contoh di atas akan menghasilkan video dengan aspek rasio 16:9, lihat selengkapnya di pranala luar.
Fitur Putar Otomatis
Pengaturan autoplay akan secara otomatis memutar video ketika memasuki viewport dan akan berhenti ketika video tersebut melewatinya. Secara default, video yang diputar otomatis akan dibisukan dan audio hanya akan muncul ketika pengguna mengeklik/mengetuk video.
Fitur ini mungkin tidak didukung pada browser yang lebih lama, tetapi untuk mencobanya, tambahkan atribut autoplay='autoplay' ke tag <amp-youtube>, misalnya:
<amp-youtube autoplay='autoplay' data-videoid='0000000000' layout='responsive' width='480' height='270'></amp-youtube>