Penggunaan Thumbnail Youtube Format WebP Untuk Amp-youtube Play Onclick Lightbox

Ditulis oleh: Adhy Suryadi

Ditulis pada: 5/02/2018

Tentu saja kita sebagai pengelola web atau blog ingin memiliki halaman yang ringan, bukan? Beberapa elemen yang wajib diperhatikan adalah penggunaan video youtube dan penggunaan gambar di dalam posingan. Kedua elemen itu sangat mempengaruhi loading halaman ketika diakses. Untuk itu kita harus hati-hati dan cermat dalam menggunakannya agar hambatan loading dari kedua elemen tersebut bisa diatasi.

Beberapa waktu yang lalu, saya sudah membagikan cara untuk mengatasi loading video Youtube khusus untuk AMP yaitu dengan play onclick. Dengan begitu video Youtube baru akan dimuat ketika pengunjung click to play.

Dalam trik itu juga saya memberikan pilihan untuk play amp-youtube onclick dengan menggunakan thumbnail video Youtube. Nah agar thumbnail Youtube tersebut juga cukup ringan untuk dimuat, kita bisa mengkalinya dengan menggunakan thumbnail Youtube format WebP.

Karena seperti kita ketahui bahwa gambar dengan format WebP sebagaimana dianjurkan oleh Google dapat mempercepat proses pemuatan gambar oleh browser sehingga halaman menjadi lebih ringan ketika diakses.

Untuk itu kita perlu mengakali penggunaan thumbnail Youtube dengan menggunakan format WebP.

Seperti telah kita ketahui bahwa kita bisa mendapatkan thumbnail Youtube dengan mudah dengan format URL seperti berikut.

https://img.youtube.com/vi/YouTubeID/ImageFormat.jpg

• Domain img.youtube.com bisa juga menggunakan i.ytimg.com atau i3.ytimg.com
• YouTubeID silahkan gunakan ID unik dari video Youtube yang ingin Anda tampilkan.
• ImageFormat saya lebih menyarankan untuk menggunakan maxresdefault (resolusi tinggi) atau mqdefault (320x180) karena kedua format tersebut tidak menggunakan bar hitam di atas dan bawah thumbnail.

Nah untuk mendapatkan thumbnail Youtube dengan format WebP, kita bisa melakukan sedikit perubahan pada URL-nya seperti berikut ini.

URL sebelumnya:

https://img.youtube.com/vi/YouTubeID/ImageFormat.jpg

URL sesudah diedit:

https://img.youtube.com/vi_webp/YouTubeID/ImageFormat.webp

Perhatikan: kode vi dirubah jadi vi_webp dan .jpg dirubah jadi .webp

Untuk contohnya seperti berikut ini.

https://img.youtube.com/vi_webp/Eng0tMkA6Y8/maxresdefault.webp

Nah untuk mengimplementasikan pada amp-youtube play on click with thumbnail and lightbox, kodenya menjadi seperti berikut ini.

Silahkan simpan 2 buah js berikut ini di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; dan jika ternyata di template blog Anda sudah ada kedua js ini, silahkan langkahi step ini. Atau jika sudah ada js dari salah satunya, maka silahkan lengkapi dengan js satunya lagi.

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

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

Kemudian silahkan tambahkan CSS berkut pada style amp-custom blog Anda.

.video-box,.video-img{width:100%;margin:0 auto;text-align:center}

.lightbox-video{background:rgba(0,0,0,.8);width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center}

.video-box{max-width:800px}

.video-img{max-width:600px;position:relative}

.playonimage{cursor:pointer;margin:auto;width:56px;height:56px;-webkit-border-radius:50%;border-radius:50%;background-color:rgba(0,0,0,.2);background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEu3eeeupTeoMCkVU1Z_tM0AyRQaHnXCTVpEZ06m8EXM2COmhkkJ-I_8r04a9jdU0tfCrxVzVzNPv4cCLrJO_RYvv2BqxCKGlXrLRKyBlpUTlXpHgSkTWUvP39x8aAbe9tjc0N2xNYsUKI/s1600/play_circle_filled_white_48dp.png);background-position:center;-webkit-background-size:48px 48px;background-size:48px 48px;position:absolute;top:0;bottom:0;left:0;right:0;z-index:1;}

Kemudian silahkan gunakan kode HTML berikut ini di dalam postingan pada mode HTML.

<amp-lightbox id="open-video" layout="nodisplay">

<div class="lightbox-video" on="tap:open-video.close,btn-play.show" role="button" tabindex="0" aria-label="Close Video">

<div class="video-box">

<amp-youtube id="video" data-videoid="Eng0tMkA6Y8" height="270" layout="responsive" width="480" data-param-rel="0" hidden></amp-youtube>

</div>

</div>

</amp-lightbox>

<div class="video-img" id="btn-play" on="tap:video.show, video.play, btn-play.hide,open-video" role="button" tabindex="0" aria-label="Play Video">

<amp-img alt="Video" src="https://i.ytimg.com/vi_webp/Eng0tMkA6Y8/maxresdefault.webp" width="637" height="356" layout="responsive"><amp-img fallback alt="Video" src="https://i.ytimg.com/vi/Eng0tMkA6Y8/maxresdefault.jpg" width="637" height="356" layout="responsive"></amp-img></amp-img>

<div class="playonimage"></div>

</div>

Anda tinggal menyesuaikan ID video Youtube untuk video dan thumbnail video pada 3 kode yang saya tandai di atas.

Untuk demonya silahkan buka JSFiddle berikut ini


Selamat mencoba....