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 instruksi embed yang disediakan Youtube yang berupa iframe.

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

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

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

Kode yag aku tandai yaitu URL embed playlist Youtube.

Nah untuk menampilkan playlist Youtube di AMP HTML dengan amp-iframe sebetulnya sudah aku bahas di postingan playlist video Youtube untuk blog AMP HTML, silahkan buat menyerupai ini.

 <amp-iframe width="560"
       height="315"
       layout="responsive"
       sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups"
       frameborder="0"
       allowfullscreen="allowfullscreen"
       src="URL_EMBED_PLAYLIST_YOUTUBE">
   </amp-iframe>

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

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

Dan untuk menampilkan playlist video Youtube dengan memakai amp-youtube, silahkan buat menyerupai 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 menyerupai yg aku tandai berikut:

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

Sebagai pola menyerupai 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 menyerupai berikut:


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


Sumber https://www.kompiajaib.com/

Share this post