Ditulis oleh: Ditulis pada: 3/01/2018
Di postingan ini kita akan memanfaatkan beberapa action AMP untuk membuat fitur play AMP Youtube on click button.Dengan fitur ini maka amp-youtube akan disembunyikan (hidden) terlebih dahulu sebelum pengguna melakukan interaksi dengan tombol play video.
Dan ketika pengunjung meng-klik tombol play video maka video Youtube akan ditampilkan dan video otomatis berputar. Kita juga bisa menggunakan parameter frame Youtube untuk mengatur tampilan frame video Youtube.
Memasang video Youtube di postingan merupakan salah satu cara untuk lebih menjelaskan isi konten secara visual sehingga menjadi lebih menarik, namun juga bisa untuk tujuan menghibur pembaca dengan menampilkan sebuah video musik atau video lainnya yang menghibur.
Namun di sisi lain, menampilkan video juga akan menambah beban loading blog yaitu pemuatan iframe video itu sendiri.
Iseng-iseng saya bereksperimen dengan AMP Youtube, saya menemukan cara untuk menunda pemuatan iframe Youtube dengan on click button. Hehehe... saya senang bereksperimen dengan video Youtube, sebelum postingan ini sudah ada beberapa modifikasi yang berhubungan dengan video Youtube.
Agar lebih mengerti apa yang saya maksud dengan play amp Youtube video on click button, silahkan coba klik tombol play di bawah ini.
Bagaimana, sudah mengerti?
Nah jika Anda ingin mencobanya, silahkan ikuti langkahnya di bawah ini.
Silahkan copy kode berikut ini dan paste di postingan mode HTML.
<div id="video-top"></div>
<amp-youtube id="video" data-videoid="8sTbqO8g7P4" 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>
<button id="btn-play" class="btn-play" on="tap:video.show, video.play, btn-play.hide, video-top.scrollTo('position' = 'top')" aria-label="Play Video">Play Video</button>
Silahkan sesuaikan kode yang saya tandai dengan ID video Youtube. Kemudian tambahkan CSS berikut untuk tampilan button play video, silahkan simpan di edit HTML di style amp-custom.
.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}
Dan jika blog Anda menggunakan sticky header seperti blog ini, silahkan tambahkan juga CSS berikut ini agar video tidak tertutupi header.
#video-top::before{content:"";display:block;height:70px;margin-top:-70px;visibility:hidden}
Silahkan sesuaikan nilai
height dan margin-top (ingat, margin-top menggunakan nilai negative) sesuaikan dengan nilai height header.Dan terakhir pastikan js amp-youtube seperti dibawah ini sudah terpasang di blog Anda.
<script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/>
Selesai, selamat mencoba dan semoga bermanfaat.