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 »

Pre code is used when you want to emphasize and organize codes in your blog post. Though you can used blockqoute but Pre code looks more professional and at the same time it gives your visitors the emphasis what kind of code you are sharing.

Pre code has unique feature such as, you can specify the kind of code your sharing e.g. CSS, JAVASCRIPT and HMTL, display in professional way and easy to select script by double click on Pre code block.

Adding Pre code in Blogger Site

This widget is powered by Font awesome version 4.3.0 so first we need to add font awesome file to your blogger template.

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 below/after <head> tag.

 CSS
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Step #5: Now find ]]></b:skin>  by Pressing CTRL + F (Windows) or CMD + F (MAC)

Step #6: Copy and paste the below code above /before  ]]></b:skin>

 CSS
 
/* CSS Pre Code */
pre {
    background: #444444;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}
pre.code {
    margin: 20px 25px;
    border-radius: 4px;
    border: 1px solid #292929;
    position: relative;
}
pre.code label {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 80%;
    color: #3C99F9;
    position: absolute;
    left: 1px;
    top: 15px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}
pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #555;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #ddd;
}
pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #ddd;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}
pre:hover::after {
    opacity: 0;
    visibility: visible;
}
pre.css code {
    color: #4899CE;
}
pre.html code {
    color: #EF662A;
}
pre.javascript code {
    color: #F4C22B;
}

Step #7: Now find </body>  by Pressing CTRL + F (Windows) or CMD + F (MAC)

Step #8: Copy and paste the below code above /before  </body>

 JS
<script type='text/javascript'>
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

Step #9: save your template.

How to use Pre code in your Blog Post?

Note: Editor should be in HTML view..

 HTML
<pre class='code html'><label><i class='fa fa-html5 fa-lg'></i> HTML</label><code>
Add HTML code here
</code></pre>

<pre class='code css'><label><i class='fa fa-css3 fa-lg'></i> CSS</label><code>
Add CSS code here
</code></pre>

<pre class='code javascript'><label><i class='fa fa-code fa-lg'></i> JS</label><code>
Add JavaScript code here
</code></pre>

Conclusion

Congrats !! You have made it. Now you have learned How to Add Pre code in Blogger Site. 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 »