Penggunaan Thumbnail Youtube Format Webp Untuk Amp-Youtube Play Onclick Lightbox

Karena menyerupai kita ketahui bahwa gambar dengan format WebP sebagaimana dianjurkan oleh Google sanggup mempercepat proses pemuatan gambar oleh browser sehingga halaman menjadi lebih ringan dikala diakses.

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

Seperti telah kita ketahui bahwa kita sanggup mendapat thumbnail Youtube dengan gampang dengan format URL menyerupai berikut.

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

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

Nah untuk mendapat thumbnail Youtube dengan format WebP, kita sanggup melaksanakan sedikit perubahan pada URL-nya menyerupai berikut ini.

URL sebelumnya:

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

URL sehabis diedit:

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

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

Untuk misalnya menyerupai 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 menyerupai berikut ini.

Silahkan simpan 2 buah js berikut ini di atas arahan </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; dan kalau ternyata di template blog Anda sudah ada kedua js ini, silahkan langkahi step ini. Atau kalau 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/AVvXsEgVOZZq70n8ZjU76ebt1Ke2yxHtz7Yybkh1otoyNWbSWJhWujQ62cbbIwSR34tTpY__s2x1VQ2snYBG3sHNFFgIp_q4J5RKdsBLtIQOHSn1pan9EzDqvsZSkh2KO56-KWNvdE_nVq2QE_TZ/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 arahan 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="Penggunaan Thumbnail Youtube Format WebP Untuk Amp Penggunaan Thumbnail Youtube Format WebP Untuk Amp-youtube Play Onclick Lightbox" src="https://i.ytimg.com/vi_webp/Eng0tMkA6Y8/maxresdefault.webp" width="637" height="356" layout="responsive"><amp-img fallback alt="Penggunaan Thumbnail Youtube Format WebP Untuk Amp Penggunaan Thumbnail Youtube Format WebP Untuk Amp-youtube Play Onclick Lightbox" 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 arahan yang aku tandai di atas.

Untuk demonya silahkan buka JSFiddle berikut ini

Selamat mencoba....

Share this post