Cara membuat amp-youtube Play On Click dengan tombol Padamkan Lampu ini adalah untuk menampilkan video Youtube di dalam postingan blog AMP dengan menambahkan tombol untuk pilihan dark theme atau kata dengan menambahkan tombol matikan lampu sehingga pengunjung akan lebih fokus ke video.
Dan ketika tombol play video di-klik, maka video akan ditampilkan di sisi atas layar dengan menggunakan action scroll to top. Di sini di tampilkan 2 cara untuk amp-youtube yang 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.
Baca Juga :
Langsung saja bagi sobat yang mau mencobanya mari di simak langkah penerapannya berikut ini Cara membuat amp-youtube Play On Click dengan tombol Padamkan Lampu.
1. Play amp-youtube on click Button
Langkah Pertama
Silahkan salin kode JS dibawah ini lalu letakkan di kode </head> atau </head><!--<head/>--> jika sobat sudah pernah memasangnya silahkan lewati langkah ini.
Langkah Ke Dua
Silahkan salin kode CSS dibawah ini lalu letakkan pada style amp-custom.
Langkah Ke Tiga
Silahkan salin kode HTML dibawah ini lalu letakkan di dalam postingan.
Langkah Ke Dua
Silahkan salin kode CSS dibawah ini lalu letakkan pada style amp-custom.
Langkah Ke Tiga
Silahkan salin kode HTML dibawah ini lalu letakkan di dalam postingan.
Perhatikan kode yang ditandai silahkan ganti dengan kode ID Youtube sobat.
<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>Langkah Ke Dua
Silahkan salin kode CSS dibawah ini lalu letakkan pada style amp-custom.
.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/AVvXsEidX4508KvtfekhQp8AZkf9eoPV_S1xWYpvN-3B9ffq7lHCde6liuq7pvg9Rs5MuDIszIki6pAoRYI9GjpdKWoOhMpS0Y_-hqGEF7Omx8fwPiHWphaE8vLOuGhG90A5hKhvKjfNeYQPszzT/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;}Langkah Ke Tiga
Silahkan salin kode HTML dibawah ini lalu letakkan di dalam postingan.
<div id="video-top"></div>
<div class="video-box">
<amp-youtube id="video" data-videoid="cL4uhaQ58Rk" 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>Perhatikan kode yang ditandai silahkan ganti dengan kode ID Youtube sobat.
2. Play amp-youtube on click Thumbnail
Langkah Pertama
Silahkan salin kode JS dibawah ini lalu letakkan di kode </head> atau </head><!--<head/>--> jika sobat sudah pernah memasangnya silahkan lewati langkah ini.<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>Langkah Ke Dua
Silahkan salin kode CSS dibawah ini lalu letakkan pada style amp-custom.
.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/AVvXsEjbtEz8xaax0xsFy3SEdMYyOBYcwFs3NgfuPOJtEeS6Nf6r384NK2BTW-UNctYkxXGz2witYFZGzmBtmmZl_O-OLJWvak27up4l8wg7EDDhNou5nIYNkQDv_Cf0j4c9jJ97NA0BuxQSI-sG/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;}Langkah Ke Tiga
Silahkan salin kode HTML dibawah ini lalu letakkan di dalam postingan.
<div id="video-top"></div>
<div class="video-box">
<amp-youtube id="video" data-videoid="cL4uhaQ58Rk" 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/cL4uhaQ58Rk/maxresdefault.jpg" width="637" height="356" layout="responsive"></amp-img>
<div class="playonimage"></div>
</div>Perhatikan kode yang ditandai silahkan ganti dengan kode ID Youtube sobat.
EmoticonEmoticon