Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / AMP Tutorial

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 dipakai oleh para pengguna internet. Milyaran video sudah diunggah oleh para pengguna YouTube. 

Selain ditayangkan di website YouTube, video-video YouTube juga sanggup ditayangkan di sebuah halaman website dengan cara memasukan instruksi embed video YouTube. Biasanya instruksi embed default YouTube akan menyerupai ini:

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/lBTCB7yLs8Y"
  frameborder="0" allow="autoplay; encrypted-media"
  allowfullscreen>
</iframe>


Namun, bila anda mempunyai website berbasis AMP HTML, tentunya instruksi tersebut tidak sanggup diterima oleh AMP dan menciptakan halaman anda error. Diperlukan beberapa perubahan instruksi default menjadi instruksi 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 instruksi <head> </head> .
<script async='async' custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Contoh instruksi embed vide Youtube supaya valid AMP ialah menyerupai di bawah ini:

  <amp-youtube
    data-videoid="lBTCB7yLs8Y"
    layout="responsive"
    width="480" height="270">
  </amp-youtube>

Dan balasannya menyerupai di bawah ini:

Tanda berwarna kuning ialah ID video YouTube yang akan anda embed di halaman website, di mana anda sanggup mendapat 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 sanggup menyesuaikan pengalaman pemutaran dalam aplikasi Anda.

Misalnya, Anda sanggup secara otomatis memutar video memakai parameter autoplay atau mengakibatkan video diputar berulang kali memakai parameter loop.

Di halaman AMP, ada beberapa parameter YouTube yang sanggup anda tambahkan kedalam instruksi embed AMP Youtube. Caranya dengan menambah instruksi data-param-*  (kecuali parameter autoplay)dilanjutkan dengan nama parameter. Contohnya, data-param-controls, yang berfungsi menghilangkan button kontrol ketika video sedang di tonton.

Saya akan coba jelaskan beberapa parameter yang sanggup anda tambahkan pada halaman AMP, instruksi ini juga support di Template Blogger valid AMP.

AMP Youtube - Autoplay

Dengan menambakan parameter autoplay, maka video akan terputar otomatis ketika pengguna mengunjungi halamn web anda. Contoh instruksi embed AMP Youtube dengan autoplay menyerupai 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 menyerupai next video, fullscreen, setting, caption dan lainnya. Contoh instruksi embed AMP Youtube dengan disable controls menyerupai 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 instruksi 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 simpulan video. Contoh instruksi 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 sanggup menggabungkan ketiga parameter tersebut di dalam satu instruksi embed video youtube. Hasilnya dari penggabungan antara parameter rel, controls, dan showinfo, ialah menyerupai ini:

Sebenarnya ada beberapa parameter video youtube yang sanggup 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 referensi CSS untuk amp-youtube supaya responsive. Silahkan copy CSS ini instruksi setelah &<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 olok-olokan di kolom komentar artikel ini.