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 DuaSilahkan 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 TigaSilahkan 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 DuaSilahkan 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 TigaSilahkan 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.