Cara Menciptakan Amp-Youtube Play On Click Dengan Tombol Padamkan Lampu

Loading...
youtube Play On Click dengan tombol Padamkan Lampu ini yaitu untuk menampilkan video Yout Cara menciptakan amp-youtube Play On Click dengan tombol Padamkan Lampu

Cara menciptakan amp-youtube Play On Click dengan tombol Padamkan Lampu ini yaitu 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 dikala tombol play video di-klik, maka video akan ditampilkan di sisi atas layar dengan memakai action scroll to top. Di sini di tampilkan 2 cara untuk amp-youtube yang aku 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 memakai lightbox. Dan lightbox dapat ditampilkan dengan klik tombol padamkan lampu di pojok kiri bawah video.

Dengan begitu pengunjung dapat 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 sahabat yang mau mencobanya mari di simak langkah penerapannya berikut ini Cara menciptakan amp-youtube Play On Click dengan tombol Padamkan Lampu.

1. Play amp-youtube on click Button

Langkah Pertama
Silahkan salin arahan JS dibawah ini kemudian letakkan di arahan </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; jikalau sahabat 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 arahan CSS dibawah ini kemudian 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://1.bp.blogspot.com/-DpJGZ47Olck/WSkXyTDP1kI/AAAAAAAArQQ/UwIxH4hYRIkbgZkN0_mUrkK12HveGFsXACLcB/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 arahan HTML dibawah ini kemudian 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 arahan yang ditandai silahkan ganti dengan arahan ID Youtube sobat.

2. Play amp-youtube on click Thumbnail

Langkah Pertama
Silahkan salin arahan JS dibawah ini kemudian letakkan di arahan </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; jikalau sahabat 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 arahan CSS dibawah ini kemudian 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://4.bp.blogspot.com/-aCqXY9Vnj9g/Wq56xpEfJJI/AAAAAAAAwjA/PqM1-3XTgnoF7Bif_Ma2NybxuCupptkYACLcBGAs/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 arahan HTML dibawah ini kemudian 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="youtube Play On Click dengan tombol Padamkan Lampu ini yaitu untuk menampilkan video Yout Cara menciptakan amp-youtube Play On Click dengan tombol Padamkan Lampu" src="https://i.ytimg.com/vi/cL4uhaQ58Rk/maxresdefault.jpg" width="637" height="356" layout="responsive"></amp-img> <div class="playonimage"></div> </div>

Perhatikan arahan yang ditandai silahkan ganti dengan arahan ID Youtube sobat.

Sumber http://www.dibalikseo.com
Loading...

Subscribe to receive free email updates:

0 Response to "Cara Menciptakan Amp-Youtube Play On Click Dengan Tombol Padamkan Lampu"

Posting Komentar