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.
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 == "static_page" and data:blog.pageType == "item"'>
<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 == "static_page" and data:blog.pageType == "item"'>Step .7 Now Save your template..Done !
<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>
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
