Ditulis oleh: Ditulis pada: 1/10/2018
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.