Membuat Playlist Video Youtube Untuk Blog AMP HTML

Jika Anda memiliki beberapa video Youtube dan ingin menampilkannya di blog Anda, maka Anda bisa membuat playlist video Youtube dan menyimpan embed playlist di blog. Dan untuk Anda yang menggunakan blog dengan AMP HTML, Anda juga bisa menampilkan playlist video Youtube dengan menggunakan amp-iframe.

Dan kali ini saya akan membagikan cara membuat playlist video Youtube di blog AMP dan sekaligus menampilkan profil dan tombol subscribe channel agar pengunjung dapat dengan mudah subscribe channel kita.

Untuk demonya silahkan lihat di sidebar blog ini atau pada JSFiddle di bawah ini.


Nah untuk menampilkan playlist video Youtube di blog AMP Anda seperti pada blog ini silahkan gunakan kode di bawah ini. Simpan pada widget HTML dan simpan di bagian bawah sidebar atau minimal 600px jarak dari tepi atas window.


<amp-iframe width="300"
      height="241"
      sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups"
      frameborder="0"
      scrolling="no"
      layout="responsive"
      allowfullscreen="allowfullscreen"
      src="https://cdn.rawgit.com/KompiAjaib/kompi-html/43078338/youtube_list.html?list=PLAYLIST_ID&channelid=CHANNEL_ID">
  </amp-iframe>

Silahkan ganti PLAYLIST_ID dengan playlist ID video Anda seperti berikut.


Silahkan edit playlist Anda dan klik tombol Share kemudian silahkan copy URL playlist-nya, biasanya seperti berikut.


https://www.youtube.com/playlist?list=PLXkJdoU2VsqkDMfEtNMpQZBRbBKDgVp1Z

Nah kode yang dimarking itu yang saya maksud dengan PLAYLIST_ID.

Kemudian silahkan ganti kode CHANNEL_ID dengan channel ID Anda. Untuk mendapatkan channel ID silahkan klik photo profil channel Anda dan pilih menu Setting.


Kemudian di halaman berikutnya silahkan klik Advanced seperti gambar berikut.


Di halaman selanjutnya akan tertera YouTube Channel ID, silahkan copy kode ID-nya.

Mudah bukan? Selamat mencoba.

Reactions:
Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser