How To Play AMP Youtube Video On Click Button
Installing Youtube videos in posts is one way to better explain the contents visually, so that it becomes more interesting but also for the purpose of entertaining the reader by displaying a music video or other video entertaining. But on the other hand, showing the video will also increase the loading loading of the blog that is loading the video iframe itself.
Adhy is a blogger who experimented on a AMP Youtube, and found a way to delay loading Youtube iframe with on click button. To better understand what it's mean by play amp Youtube video on click button, please try click the play button below.
Well if you want to try it, please follow the steps below. Please copy the following code and paste it in the HTML mode post.
HTML CODE
<div id="video-top"></div>
<amp-youtube id="video" data-videoid="4MkNdBHNWWc" 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>Adjust the code marked with Youtube video ID. Then add the following CSS to the display button video play , please save in edit HTML in amp-custom style.
CSS CODE
.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/AVvXsEg-AXYyBrubzABXvyTx8DDC4ZbpmF89rivnfbeoSqDCcHRhFwvHTgBE0AOKTTnxxIO3lsDPqfPbYnZCS0W8jsSIqjrsLdppToYbppRTK22aPq3AGbrKbhD6y1IKRoGJayguLuqSxfcp_m5h/s1600/play.png);background-size:cover;background-repeat:no-repeat;width:30px;height:40px;position:absolute;left:0;top:50%;margin-top:-20px}And finally make sure js amp-youtube as below is already installed on your blog.
JAVASCRIPT
<script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/>You are Done!, good luck and hopefully useful.