Home » Tip Trick Blog » Penggunaan Thumbnail Youtube Format WebP Untuk Amp-youtube Play Onclick Lightbox
7:28:00 PM
0 comments

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

Penggunaan Thumbnail Youtube Format WebP Untuk Amp-youtube Play Onclick 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/AVvXsEi76gNtSGQoL_Mpt87EbzxscriBoabb3s5mSlVYYKJNxhkAVuO6PkmtKQXreTsF5tFPR01IWIOmdCoWsVun6sO8tey4-VWEY62Niktfu0uoLp5MwQTOxODw4Ba7HxSeRznto-GtRnxKMwPk/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



Labels:
Share: