amp-youtube Play On Click dengan tombol Padamkan Lampu

Postingan ini adalah gabungan 2 trik untuk amp-youtube yang sebelumnya saya bagikan yaitu, play amp-youtube onclick dan play amp-youtube onclick with lightbox.

Ketika tombol di-klik, maka video Youtube akan ditampilkan dngan otomatis main tetapi belum menggunakan lightbox. Dan lightbox bisa ditampilkan dengan klik tombol padamkan lampu di pojok kiri bawah video.

Dengan begitu pengunjung bisa lebih fokus untuk menonton video yang ditampilkan. Jika ingin melanjutkan baca artikel, maka pengunjung tinggal nyalakan lampu lagi dengan klik tombol di kiri bawah video.

Di sini saya membuat 2 buah trik yaitu yang menggunakan tombol dan yang menggunakan thumbnail video untuk click play video.

Demo with Button

Demo with Thumbnail

1. Play amp-youtube on click Button

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.

.center,.video-box{text-align:center}

.video-box{width:100%;max-width:800px;margin:0 auto;position:relative;}

.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/AVvXsEh36CAiveGMS4gtV1J6-QOSBCjBlaaXLISy_euhCPFl12HIJp_46efU-zh0XDTY6mwN-xe2P7S1d32BIBGcdUqykQsIoAhFkA1yhAQu0Aei3cTtQFs0lk-5sLpHyNPzmNRzgojqYh2l4v4k/s1600/play.png);background-size:cover;background-repeat:no-repeat;width:30px;height:40px;position:absolute;left:0;top:50%;margin-top:-20px}

amp-lightbox#open-lightbox{z-index:998}

amp-youtube{z-index:999}

.lightbox-video{background:rgba(0,0,0,.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:998}

.lightbox-toggle{background:rgba(255,255,255,.8);color:#333;font-size:80%;padding:0 5px;height:25px;line-height:25px;position:absolute;bottom:0;left:0;z-index:999;cursor:pointer;border-radius:0 4px 0 0;}

.lightbox-toggle svg{vertical-align:-3px;}

Kemudian silahkan gunakan kode HTML berikut ini di dalam postingan pada mode HTML.

<div id="video-top"></div>

<div class="video-box">

<amp-youtube id="video" data-videoid="AO0gDX89Tog" 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>

<amp-lightbox id='open-lightbox' layout='nodisplay'>

<div class='lightbox-video' hidden='' id='lightbox-video'></div> 

</amp-lightbox>

<div class='lightbox-toggle' hidden='' id='lightbox-open' on='tap:lightbox-video.toggleVisibility,open-lightbox,lightbox-open.hide,lightbox-close.show,video-top.scrollTo("position" = "top")' role='button' tabindex='0'><svg height='16' viewBox='0 0 24 24' width='16'><path d='M12,2A7,7 0 0,0 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0 9,18H15A1,1 0 0,0 16,17V14.74C17.81,13.47 19,11.38 19,9A7,7 0 0,0 12,2M9,21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9V21Z' fill='#000000'/></svg></div> 

<div class='lightbox-toggle' hidden='' id='lightbox-close' on='tap:lightbox-video.toggleVisibility,open-lightbox.close,lightbox-open.show,lightbox-close.hide' role='button' tabindex='0'><svg height='16' viewBox='0 0 24 24' width='16'><path d='M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M11,18H13V15.87C14.73,15.43 16,13.86 16,12A4,4 0 0,0 12,8A4,4 0 0,0 8,12C8,13.86 9.27,15.43 11,15.87V18Z' fill='#000000'/></svg></div>

</div>

<div class="center">

<button id="btn-play" class="btn btn-play" on="tap:video.show, video.play, btn-play.hide, video-top.scrollTo('position' = 'top'),lightbox-open.show" 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 &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;position:relative}

.video-box{max-width:800px}

.video-img{max-width:600px}

.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}

amp-lightbox#open-lightbox{z-index:998}

amp-youtube{z-index:999}

.lightbox-video{background:rgba(0,0,0,.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:998}

.lightbox-toggle{background:rgba(255,255,255,.8);color:#333;font-size:80%;padding:0 5px;height:25px;line-height:25px;position:absolute;bottom:0;left:0;z-index:999;cursor:pointer;border-radius:0 4px 0 0;}

.lightbox-toggle svg{vertical-align:-3px;}

Kemudian silahkan gunakan kode HTML berikut ini di dalam postingan pada mode HTML.

<div id="video-top"></div>

<div class="video-box">

<amp-youtube id="video" data-videoid="AO0gDX89Tog" 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>

<amp-lightbox id='open-lightbox' layout='nodisplay'>

<div class='lightbox-video' hidden='' id='lightbox-video'></div> 

</amp-lightbox>

<div class='lightbox-toggle' hidden='' id='lightbox-open' on='tap:lightbox-video.toggleVisibility,open-lightbox,lightbox-open.hide,lightbox-close.show,video-top.scrollTo("position" = "top")' role='button' tabindex='0'><svg height='16' viewBox='0 0 24 24' width='16'><path d='M12,2A7,7 0 0,0 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0 9,18H15A1,1 0 0,0 16,17V14.74C17.81,13.47 19,11.38 19,9A7,7 0 0,0 12,2M9,21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9V21Z' fill='#000000'/></svg></div> 

<div class='lightbox-toggle' hidden='' id='lightbox-close' on='tap:lightbox-video.toggleVisibility,open-lightbox.close,lightbox-open.show,lightbox-close.hide' role='button' tabindex='0'><svg height='16' viewBox='0 0 24 24' width='16'><path d='M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M11,18H13V15.87C14.73,15.43 16,13.86 16,12A4,4 0 0,0 12,8A4,4 0 0,0 8,12C8,13.86 9.27,15.43 11,15.87V18Z' fill='#000000'/></svg></div>

</div>

<div class="video-img" id="btn-play" on="tap:video.show, video.play, btn-play.hide, video-top.scrollTo('position' = 'top'),lightbox-open.show" role="button" tabindex="0" aria-label="Play Video">

<amp-img alt="Video" src="https://i.ytimg.com/vi/AO0gDX89Tog/maxresdefault.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.

Dengan ini kita bisa menampilkan video Youtube di postingan AMP menjadi lebih menarik dan lebih aktraktif.