Ditulis oleh: Ditulis pada: 3/18/2018
Amp-youtube play onclick and on lightbox ini adalah salah satu cara mengoptimalkan loading halaman postingan dengan menunda pemuatan video Youtube dan salah satu cara memodifikasi tampilan video Youtube pada halaman AMP HTML.Dengan menggunakan lightbox ini juga kita bisa membuat pengunjung lebih fokus pada konten video yang disajikan ketika klik tombol play atau klik pada image thumbnail video dengan memadamkan konten lainnya di belakang overlay lightbox.
Dengan begitu, penyajian konten video di dalam postingan akan lebih optimal dan lebih banyak mendapat perhatian pengunjung.
Dan amp-youtube play onclick and on lightbox ini adalah sambungan dari postingan sebelumnya tentang play amp-youtube on click button dengan menambahkan fitur amp-lightbox dan juga konsepnya sama seperti postingan alternative lain manipulasi tampilan video Youtube untuk blog Non AMP, sehingga membuat video menjadi lebih fokus.
Sehingga ini memberikan lebih banyak pilihan kepada Anda untuk menyajikan konten video di dalam postingan blog AMP HTML.
Dan dengan ini juga membuat halaman postingan AMP menjadi lebih menarik dan tidak berkesan kaku sehingga pengunjung menjadi lebih betah mengunjungi postingan-postingan blog AMP HTML.
Dan kali ini saya membuat 2 buah trik yaitu play onclick button dan play onclick video thumbnail (seperti pada postingan-postingan Google+). Tinggal pilih mana yang lebih Anda sukai.
1. Play amp-youtube on click Button
Silahkan simpan 2 buah js berikut ini di atas kode</head> atau </head><!--<head/>--> 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.
.center,.video-box{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{width:100%;max-width:800px;margin:0 auto}
.btn-play{color:#fff;background-color:#D32F2F;padding:10px 16px 10px 40px;position:relative;font:500 18px Roboto,sans-serif;line-height:1.3333333;border-radius:6px;margin-bottom:5px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;display:inline-block;background-image:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.btn-play:active,.btn-play:focus,.btn-play:hover{color:#fff;background-color:#C62828;border-color:#B71C1C}
.btn-play:before{content:"";color:#fff;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs__OoZThkc-08pEoHwq2yidWDVrHWuLekT4bbYSyD3N9AtVlPELraXIIvHC5dX71hKNpRFo1c34xLEB5ICQMf2O5sT8Gjf47Sf4Q9O5veku9YGRCczuufF13GA7UAgaL9cqHkwsmxf89g/s1600/play.png);background-size:cover;background-repeat:no-repeat;width:30px;height:40px;position:absolute;left:0;top:50%;margin-top:-20px}
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-controls="0" data-param-rel="0" data-param-showinfo="0" data-param-modestbranding="1" data-param-autohide="1" hidden></amp-youtube>
</div>
</div>
</amp-lightbox>
<div class="center">
<button id="btn-play" class="btn btn-lg btn-play" on="tap:video.show, video.play, btn-play.hide, open-video" aria-label="Play Video">Play Video</button>
</div>
Anda tinggal menyesuaikan ID video Youtube pada kode yang saya tandai di atas.
2. Play amp-youtube on click Thumbnail
Silahkan simpan 2 buah js berikut ini di atas kode</head> atau </head><!--<head/>--> 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}
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-controls="0" data-param-rel="0" data-param-showinfo="0" data-param-modestbranding="1" data-param-autohide="1" 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/Eng0tMkA6Y8/mqdefault.jpg" width="637" height="356" layout="responsive"></amp-img>
<div class="playonimage"></div>
</div>
Anda tinggal menyesuaikan ID video Youtube untuk video dan thumbnail video pada 2 kode yang saya tandai di atas.
Bagaimana, mudah bukan?
Selamat mencoba dan semoga bermanfaat.