Amp-Youtube Play Onclick And On Lightbox
Dan amp-youtube play onclick and on lightbox ini yakni sambungan dari postingan sebelumnya ihwal play amp-youtube on click button dengan menambahkan fitur amp-lightbox dan juga konsepnya sama ibarat postingan alternative lain manipulasi tampilan video Youtube untuk blog Non AMP, sehingga menciptakan video menjadi lebih fokus.Sehingga ini menunjukkan lebih banyak pilihan kepada Anda untuk menyajikan konten video di dalam postingan blog AMP HTML.
Dan dengan ini juga menciptakan halaman postingan AMP menjadi lebih menarik dan tidak berkesan kaku sehingga pengunjung menjadi lebih betah mengunjungi postingan-postingan blog AMP HTML.
Dan kali ini saya menciptakan 2 buah trik yaitu play onclick button dan play onclick video thumbnail (seperti pada postingan-postingan Google+). Tinggal pilih mana yang lebih Anda sukai.
1. Play amp-youtube on click Button
Silahkan simpan 2 buah js berikut ini di atas isyarat</head> atau </head><!--<head/>--> dan kalau ternyata di template blog Anda sudah ada kedua js ini, silahkan langkahi step ini. Atau kalau 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}
.lightbox-video{background:rgba(0,0,0,.8);width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center}
.video-box{width:100%;max-width:800px;margin:0 auto}
.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}
Kemudian silahkan gunakan isyarat HTML berikut ini di dalam postingan pada mode HTML.
<amp-lightbox id="open-video" layout="nodisplay">
<div class="lightbox-video" on="tap:open-video.close,btn-play.show" role="button" tabindex="0" aria-label="Close Video">
<div class="video-box">
<amp-youtube id="video" data-videoid="Eng0tMkA6Y8" 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>
</div>
</div>
</amp-lightbox>
<div class="center">
<button id="btn-play" class="btn btn-lg btn-play" on="tap:video.show, video.play, btn-play.hide, open-video" aria-label="Play Video">Play Video</button>
</div>
Anda tinggal menyesuaikan ID video Youtube pada isyarat yang saya tandai di atas.
2. Play amp-youtube on click Thumbnail
Silahkan simpan 2 buah js berikut ini di atas isyarat</head> atau </head><!--<head/>--> dan kalau ternyata di template blog Anda sudah ada kedua js ini, silahkan langkahi step ini. Atau kalau 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}
.lightbox-video{background:rgba(0,0,0,.8);width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center}
.video-box{max-width:800px}
.video-img{max-width:600px;position:relative}
.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/AVvXsEhVRbTRHa1cZ9UiMlopNueK4Y0okPq0066PU77K7fHnQ3fzbKTNqpLUScd8hell2EA-AGSUShjGaeGh_c00fQjiS4rII50XaQ2kmuRSLFjQ4M48TBw7V1j55lq16USX4tB8fRyLtWpl6eB9/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}
Kemudian silahkan gunakan isyarat HTML berikut ini di dalam postingan pada mode HTML.
<amp-lightbox id="open-video" layout="nodisplay">
<div class="lightbox-video" on="tap:open-video.close,btn-play.show" role="button" tabindex="0" aria-label="Close Video">
<div class="video-box">
<amp-youtube id="video" data-videoid="Eng0tMkA6Y8" 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>
</div>
</div>
</amp-lightbox>
<div class="video-img" id="btn-play" on="tap:video.show, video.play, btn-play.hide,open-video" role="button" tabindex="0" aria-label="Play Video">
<amp-img alt=" ini yakni sambungan dari postingan sebelumnya ihwal Amp-youtube Play Onclick And On Lightbox" src="https://i.ytimg.com/vi/Eng0tMkA6Y8/mqdefault.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 isyarat yang saya tandai di atas.
Bagaimana, gampang bukan?
Selamat mencoba dan supaya bermanfaat.
Sumber https://www.kompiajaib.com/
0 Response to "Amp-Youtube Play Onclick And On Lightbox"
Posting Komentar