Wednesday, July 25, 2018

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 <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>


Dan hasilnya seperti di bawah ini:

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.

Disqus Comments