Free Video Blogger Templates

Embedding Youtube Video with AMP is a way to optimize loading in your web pages or blog. For this tutorial you are going to Embed YouTube Video with AMP Play OnClick and on Lightbox. By using this lightbox we can also make visitors focus more on the video content presented when clicking the play button or clicking on the video thumbnail image by extinguishing other content behind the lightbox overlay. There are two ways that we are going to use for this tutorial, by using BUTTON and video THUMBNAIL

1. Play amp-youtube on click using Button

Live Demo - BUTTON

Let us begin with the tutorial:

Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard.

Step #2: Click Theme --> Edit HTML.

Step #3: Find </head> by Pressing CTRL + F (Windows) or CMD + F (MAC)

Step #4: Now paste the below code above/before  </head> tag.

 JS
<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>

Step #5: For CSS find this tag: ]]></b:skin>, just above it add the code below.

 CSS
.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/AVvXsEgAzP9d_P-EKKungS3AI6bx2sttoQYKtQeGCAW1Q-u5BsBMpt6-7O-aNWnHZ2jJCUtjXxYTLUCKamfZPtjiI06vwHdmRBd-DuexPBiU9CDqBA0_jECowo-ugI61BrNZQ2KOV7eUS35MU3Wv/s1600/play.png);background-size:cover;background-repeat:no-repeat;width:30px;height:40px;position:absolute;left:0;top:50%;margin-top:-20px}

For posting: Use the below code, paste in your blogger post editor.

 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>

Note: Change the red code with your Youtube Video ID.




2. Play amp-youtube on click with Thumbnail

Live Demo - THUMBNAIL

Let us begin with the tutorial:

Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard.

Step #2: Click Theme --> Edit HTML.

Step #3: Find </head> by Pressing CTRL + F (Windows) or CMD + F (MAC)

Step #4: Now paste the below code above/before  </head> tag.

 JS
<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>

Step #5: For CSS find this tag: ]]></b:skin>, just above it add the code below.

 CSS
.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/AVvXsEh7e_hvx_P6RezuDIzHAlecKPE3NNIHHLGAtHRdl_71w_DpoDKRAasKpq8qfDkNG1wWkdwPm92AnpKfCvI-PjFdjRChQxPia0ucPIlVcvcU6KZOGPYaKngJ2dXeGQ51YixftvzFapdqyZCV/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}

For posting: Use the below code, paste in your blogger post editor.

 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="Video" src="https://i.ytimg.com/vi/Eng0tMkA6Y8/mqdefault.jpg" width="637" height="356" layout="responsive"></amp-img>
<div class="playonimage"></div>
</div>

Note: Change the red code with your Youtube Video ID.

Conclusion

Congrats !! You have made it. Now you have learned How to Embed YouTube Video with AMP Play OnClick in Blogger. Hope you liked this tutorial, if you enjoyed then please share it with your friends, please stay tuned with Us for more such awesome tutorials. Happy Blogging!

Learn more »