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

0
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;'>
<script>
//<![CDATA[
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;    
        if(pattern.test(html)){
              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;
    }
}
setTimeout(function(){
    videoEmbed.invoke();
},800);
//]]>
</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;}
}
.videoyoutube{
    margin:20px auto;
    width:100%;
}
.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%;
  border:0;
}
img.video-thumbnail{
    width:100%;
    height:auto;
border:none;
}
</style>
</b:if>
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
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.
Hello Folks,Today we are come with a unique trick to embed you video directly with url only no m...
SUMMARY

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.

You Might Also Like:

We hope this article helped you to learn How To Add You Tube Video Only With URL In Blogger Template. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Add You Tube Video Only With URL In Blogger Template" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand