Memodifikasi Amp-Youtube Dengan Tampilan Smartphone Frame
Kita sudah cukup usang mengenal AMP, betul? Nah sekarang kita mulai bermain-main dengan layout widget, salah satunya dengan amp-youtube.Dari dulu aku paling suka utak-atik model tampilan untuk video Youtube, dan sekarang kita akan memodifikasi amp-youtube dengan tampilan smartphone frame menyerupai 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 yaitu favorite aku dari kontestan Indonesian Idol 2018, aransemen lagu Lirih, keren banget...
Nah kalau Anda mau mencobanya silahkan ikuti langkah-langkahnya berikut ini.
Silahkan simpan js amp-youtube berikut di atas
</head>, kalau 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 aba-aba 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 aba-aba 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="youtube Dengan Tampilan Smartphone Frame Memodifikasi amp-youtube Dengan Tampilan Smartphone Frame" 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 aku tandai di atas.Video ID Youtube itu menyerupai berikut ini, diambil dari URL video Youtube.
https://www.youtube.com/watch?v=Htg2ul6kQsw
Selamat mencoba.
Sumber https://www.kompiajaib.com/
0 Response to "Memodifikasi Amp-Youtube Dengan Tampilan Smartphone Frame"
Posting Komentar