20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

How To Add You Tube Video Only With URL In Blogger Template

Learn trick how to embed youtube video in blogger blogspot template without embed code.tutorial on how to automatically add youtube video only with url working with blogger template.
How To Add You Tube Video Only With URL In Blogger Template
Hello Folks,Today we are come with a unique trick to embed you video directly with url only no more embed code :) etc.In this post we will explain How to Add YouTube Video With URL Only In Blogger Template.Lot's Of visitors asking for this thing and today we have developed this trick and we are presenting infront of you.The benefits of this trick is that you can just write the url of your video and your blogger template will display with YouTube URL code is totally responsive and we have tested in all versions and its working perfectly.And it will also not effect your page speed.We are using java script and  for styling some CSS.

How youtube url trick works?

Just go and create a new post and copy the url of your desired you tube video and paste it in the post editor box and publish it.To grab this trick just follow the steps mentioned below.

installation steps:

Step .1 Go to https://www.blogger.com and Sign in to your account.
Step .2 Now From Blogger Dashboard click on ->Template ->Edit HTML.
Step .3 Now Search For closing </body> tag In Your Template By Using CTRL+F Keys or CMD+F
Step .4 Now Paste the following below code just above </body> tag.
<b:if cond='data:blog.pageType == &quot;static_page&quot; and data:blog.pageType == &quot;item&quot;'>
if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");};
var videoEmbed = {
    invoke: function(){    
        $('.post-body').html(function(i, html) {
            return videoEmbed.convertMedia(html);
    convertMedia: function(html){
          var pattern = /(?:http?s?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g;    
              var replacement = '<img class="video-thumbnail" alt="video thumbnail" height="300" src="http://ytimg.googleusercontent.com/vi/$1/0.jpg" width="600"/> <div class="videoyoutube"><div class="video-responsive"><iframe height="281" width="500" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe></div></div>';        
              var html = html.replace(pattern, replacement);
         return html;
</script> </b:if>
Step .5 Now Search For </head> tag In Your Template By Using CTRL+F Keys or CMD+F
Step .6 Now paste the Following below code just above </head> tag.
<b:if cond='data:blog.pageType == &quot;static_page&quot; and data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}

@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
    margin:20px auto;
.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
Step .7 Now Save your template..Done !

How to use it? 

Just go to your dashboard->create new post after that just paste the you tube url inside the post editor box but before posting click on HTML tab then insert the you tube url.That's it !!Look below for example
How to add you tube url inside blogger post editor

Post a Comment