Skip to main content
KOMPI AJAIB

follow us

Memodifikasi amp-youtube Dengan Tampilan Smartphone Frame

Dengan memodifikasi amp-youtube menggunakan tampilan smartphone frame ini memberikan cara baru interaksi pengunjung dengan konten video Youtube.

Sehingga dengan memodifikasi amp-youtube seperti ponsel ini membuat pegunjung blog mendapatkan pemandangan baru untuk konten video yang kita sajikan.

Dengan begitu akan membuat pengunjung merasa betah karena videonya ditampilkan berbeda dari video biasanya yang biasanya tampilannya hanya itu-itu saja.

Kita sudah cukup lama mengenal AMP, betul? Nah kini kita mulai bermain-main dengan layout widget, salah satunya dengan amp-youtube.

Dari dulu saya paling suka utak-atik model tampilan untuk video Youtube, dan kini kita akan memodifikasi amp-youtube dengan tampilan smartphone frame seperti pada gambar di atas.

Dengan begitu tampilan video Youtube untuk AMP menjadi lebih kekinian, tidak hanya tampil kotak saja sehingga tidak kalah dengan blog-blog non AMP.

Untuk lebih jelasnya, silahkan lihat dan coba pada JSFiddle di bawah ini, modifikasi ini sudah responsive. Videonya adalah favorite saya dari kontestan Indonesian Idol 2018, aransemen lagu Lirih, keren banget...


Nah jika Anda mau mencobanya silahkan ikuti langkah-langkahnya berikut ini.

Silahkan simpan js amp-youtube berikut di atas </head>, jika sudah ada maka tidak perlu disimpan lagi.


<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Kemudian silahkan simpan amp-youtube berikut di bawah <body>; atau di atas </body>. Jika di template Anda sudah ada maka tidak perlu simpan kode ini lagi.


<amp-youtube data-videoid='mGENRKrdoGY' height='270' layout='nodisplay' width='480'/>

Kemudian silahkan simpan CSS berikut ini pada style amp-custom blog AMP Anda.


.youtube-box{position:relative}
.youtube-frame{position:absolute;top:0;left:0;width:81%;height:81%;margin-left:9.4%;margin-top:4.4%;overflow:hidden;z-index:2;border-radius:8px}
.youtube-frame amp-youtube{width:100%;height:100%}

Kemudian untuk menampilkan video Youtube di postingan, silahkan gunakan kode berikut ini.


<div class="youtube-box">
  <div class="youtube-frame">
    <amp-youtube
     data-videoid="Htg2ul6kQsw"
     height="270"
     layout="responsive"
     width="480"
     data-param-controls="0"
     data-param-modestbranding="1"
     data-param-autohide="1"
     data-param-autoplay="0"
     data-param-fs="0"
     data-param-rel="0"
     data-param-showinfo="0"
     data-param-iv_load_policy="3"
     data-param-enablejsapi="1"
     data-param-widgetid="1"></amp-youtube>
  </div>
  <div class="youtube-framebox">
    <amp-img alt="" width="900" height="456" src="https://lh3.googleusercontent.com/IQjewlt0MR3HL1DNSxCexulMuMrYkjO9CWazGlFlPVEOc2vD1ve4ZGr6EnDGqtk1OYSiPLBebbKnrF3GKIHLYA=v1-rw-w900" layout="responsive"></amp-img>
  </div>
</div>

Anda tinggal menyesuaikan data-videoid yang saya tandai di atas.

Video ID Youtube itu seperti berikut ini, diambil dari URL video Youtube.


https://www.youtube.com/watch?v=Htg2ul6kQsw

Selamat mencoba.

You Might Also Like:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar