Play Amp Youtube Video On Click Button

Memasang video Youtube di postingan merupakan salah satu cara untuk lebih menjelaskan isi konten secara visual sehingga menjadi lebih menarik, namun juga dapat 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 ialah pemuatan iframe video itu sendiri.

Iseng-iseng aku bereksperimen dengan AMP Youtube, aku menemukan cara untuk menunda pemuatan iframe Youtube dengan on click button. Hehehe... aku bahagia bereksperimen dengan video Youtube, sebelum postingan ini sudah ada beberapa modifikasi yang bekerjasama dengan video Youtube.

Agar lebih mengerti apa yang aku maksud dengan play amp Youtube video on click button, silahkan coba klik tombol play di bawah ini.

Bagaimana, sudah mengerti?

Nah jikalau Anda ingin mencobanya, silahkan ikuti langkahnya di bawah ini.

Silahkan copy arahan 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 arahan yang aku 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/AVvXsEhZqRKkUEeRVgsxNRnkQz-F-q4Y6ki_1rkxOPg4Z2He4Dg_FsOBqVP99kks97-qsYkL46lvQBP3Rd8XXIQNLB2xgxWSwWiJFOo2HLMl_VsVeaz0vs8cSV8cIQN-YUTvxkLW2Zy3edoDV449/s1600/play.png);background-size:cover;background-repeat:no-repeat;width:30px;height:40px;position:absolute;left:0;top:50%;margin-top:-20px}

Dan jikalau blog Anda memakai sticky header menyerupai blog ini, silahkan tambahkan juga CSS berikut ini semoga 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 memakai nilai negative) sesuaikan dengan nilai height header.

Dan terakhir pastikan js amp-youtube menyerupai 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.

Sumber https://www.kompiajaib.com/

Share this post