Tutorial Embed Youtube di AMP Blogger, Lengkap dengan Parameter
Tutorial Cara Embed Video Youtube di AMP Blogger, Lengkap dengan Parameter Youtube
Youtube merupakan salah satu platform video terbesar dan paling banyak digunakan oleh para pengguna internet. Milyaran video sudah diunggah oleh para pengguna YouTube.
Selain ditayangkan di website YouTube, video-video YouTube juga bisa ditayangkan di sebuah halaman website dengan cara memasukan kode embed video YouTube. Biasanya kode embed default YouTube akan seperti ini:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/lBTCB7yLs8Y"
frameborder="0" allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
Namun, jika anda memiliki website berbasis AMP HTML, tentunya kode tersebut tidak bisa diterima oleh AMP dan membuat halaman anda error. Diperlukan beberapa perubahan kode default menjadi kode berbasis AMP.
Anda hanya perlu mengambil ID video Youtube dan mencopy-nya ke dalam code yang sudah disediakan oleh AMP Project.
Tapi sebelumnya, Anda perlu memasukan javascript amp-youtube berikut ini diantara kode
Contoh kode embed vide Youtube agar valid AMP adalah seperti di bawah ini:
Dan hasilnya seperti di bawah ini: Anda hanya perlu mengambil ID video Youtube dan mencopy-nya ke dalam code yang sudah disediakan oleh AMP Project.
Tapi sebelumnya, Anda perlu memasukan javascript amp-youtube berikut ini diantara kode
<head> </head> .<script async='async' custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>Contoh kode embed vide Youtube agar valid AMP adalah seperti di bawah ini:
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="480" height="270">
</amp-youtube>
Tanda berwarna kuning adalah ID video YouTube yang akan anda embed di halaman website, di mana anda bisa mendapatkan ID video tersebut di URL video YouTube. Contoh url: https://www.youtube.com/watch?v=lBTCB7yLs8Y
Menambahkan Parameter YouTube di AMP HTML Blogger
Dengan menambahkan parameter ke URL IFrame, Anda dapat menyesuaikan pengalaman pemutaran dalam aplikasi Anda.Misalnya, Anda dapat secara otomatis memutar video menggunakan parameter autoplay atau menyebabkan video diputar berulang kali menggunakan parameter loop.
Di halaman AMP, ada beberapa parameter YouTube yang bisa anda tambahkan kedalam kode embed AMP Youtube. Caranya dengan menambah kode
data-param-* (kecuali parameter autoplay)dilanjutkan dengan nama parameter. Contohnya, data-param-controls, yang berfungsi menghilangkan button kontrol saat video sedang di tonton.Saya akan coba jelaskan beberapa parameter yang bisa anda tambahkan pada halaman AMP, kode ini juga support di Template Blogger valid AMP.
AMP Youtube - Autoplay
Dengan menambakan parameter autoplay, maka video akan terputar otomatis saat pengguna mengunjungi halamn web anda. Contoh kode embed AMP Youtube dengan autoplay seperti di bawah ini:
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="480" height="270"
autoplay='1'>
</amp-youtube> Jika atribut autoplay ini ada, dan browser mendukung pemutaran otomatis, maka:
- suara video secara otomatis mute sebelum autoplay dimulai.
- saat video digulir keluar dari tampilan, video dijeda.
- saat video diputar ke tampilan, video melanjutkan pemutaran.
- ketika pengguna mengetuk video, video tersebut disuarakan.
AMP Youtube - Controls
Dengan menambakan parameter controls, maka video yang diputar tidak akan menampilkan button control Youtube seperti next video, fullscreen, setting, caption dan lainnya. Contoh kode embed AMP Youtube dengan disable controls seperti di bawah ini:
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="480" height="270"
data-param-controls='0'>
</amp-youtube>Hasil:
AMP Youtube - ShowInfo
Dengan menambakan parameter showinfo, maka video yang diputar tidak akan menampilkan judul video Youtube. Contoh kode embed AMP Youtube dengan disable controls seperti di bawah ini:
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="480" height="270"
data-param-showinfo='0'>
</amp-youtube> Hasil:
AMP Youtube - Rel
Dengan menambakan parameter rel, maka video yang diputar tidak akan menampilkan related video di akhir video. Contoh kode embed AMP Youtube dengan disable controls seperti di bawah ini:
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="480" height="270"
data-param-rel='0'>
</amp-youtube>Hasil:
Anda juga bisa menggabungkan ketiga parameter tersebut di dalam satu kode embed video youtube. Hasilnya dari penggabungan antara parameter rel, controls, dan showinfo, adalah seperti ini:
Sebenarnya ada beberapa parameter video youtube yang bisa anda terapkan, silahkan kunjungi YouTube player parameter.
Untuk lebih lengkapnya mengenai amp-youtube, silahkan kunjungi link ini.
Kode CSS amp-youtube Responsive
Saya akan beri contoh CSS untuk amp-youtube agar responsive. Silahkan copy CSS ini kode sesudah &<style amp-custom='amp-custom'> pada template blogger AMP anda. Dan panggil selector dengan <div class='videoyoutube'>:.videoyoutube{text-align:center;margin:auto;width:100%;}Semoga bermanfaat. Bila ada pertanyaan, silahkan ajukan di kolom komentar artikel ini.