Menampilkan Playlist Video Youtube Di Blog AMP HTML

Kadang seorang Blogger perlu menampilkan sebuah playlist video Youtube di blog, baik itu playlist video musik, video tutorial, atau video lainnya.

Bagi blog non AMP, untuk menampilkan playlist video youtube tinggal gunakan kode embed yang disediakan Youtube yang berupa iframe.

Namun bagi blog yang menggunakan AMP HTML, untuk menampilkan playlist video Youtube ini ada 2 cara yaitu dengan menggunakan amp-youtube dan amp-iframe.

Kode embed video yang disediakan Youtube ini biasanya seperti berikut ini.

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLXkJdoU2VsqlOKNTRMLegYrCqAwKuaO0e" frameborder="0" gesture="media" allowfullscreen></iframe>

Kode yag saya tandai adalah URL embed playlist Youtube.

Nah untuk menampilkan playlist Youtube di AMP HTML dengan amp-iframe silahkan buat seperti ini.

<amp-iframe width="560"

      height="315"

      layout="responsive"

      sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups"

      frameborder="0"

      src="URL_EMBED_PLAYLIST_YOUTUBE">

  </amp-iframe>

Silahkan ganti URL_EMBED_PLAYLIST_YOUTUBE dengan URL dari embed playlist Youtube di atas yang saya tandai.

Namun yang harus diperhatikan jika menampilkan playlist video Youtube dengan menggunakan amp-iframe, maka playlist dengan amp-iframe harus disimpan kurang lebih 75% dari tepi atas layar ketika halaman pertama kali dibuka sebelum di scroll, dan pastikan sudah memasang js amp-iframe.

Dan untuk menampilkan playlist video Youtube dengan menggunakan amp-youtube, silahkan buat seperti berikut:

<amp-youtube

      width="480"

      height="270"

      layout="responsive"

      data-videoid="ID_VIDEO_PERTAMA"

      data-param-listType="playlist"

      data-param-list="ID_LIST">

  </amp-youtube>

ID_VIDEO_PERTAMA silahkan ganti dengan ID video pertama dari list tersebut. ID_LIST itu seperti yg saya tandai berikut:

https://www.youtube.com/embed/videoseries?list=PLXkJdoU2VsqlOKNTRMLegYrCqAwKuaO0e

Sebagai contoh seperti berikut:

<amp-youtube

      width="480"

      height="270"

      layout="responsive"

      data-videoid="UtjFu8c_goE"

      data-param-listType="playlist"

      data-param-list="PLXkJdoU2VsqlOKNTRMLegYrCqAwKuaO0e">

  </amp-youtube>

Dan tampil seperti berikut:


Dengan amp-youtube kita bisa menampilkan video youtube di mana saja baik di atas maupun di bawah postingan, dan pastikan sudah memasang js amp-youtube.