Loading...
How To Upload Responsive Youtube Video On Blog

How To Upload Responsive Youtube Video On Blog

7:29 PM
How To Upload Responsive Youtube Video On Blog - Many advantages offered by Youtube, one of which is that we can watch streaming video anytime and anywhere. In fact, video from youtube can be uploaded on our blog. However, adding video to the blog can reduce SEO on a blog for their iFrame elements and not responsive.



Therefore, infoBlog will share a tutorial about How To Upload Responsive Youtube Video On Blog that your video is more responsive. Follow the steps below . .

How To Upload Responsive Youtube Video :

  1. Go to your Blogger Dashboard ›› Template ›› Edit HTML
  2. Add the code below before ]]></b:skin> or </style>
    3. /* Youtube Responsive Video by infoBlog */ .videoyoutube{text-align:center;margin: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}
  3. Add the code below before </body>
    4. <script type='text/javascript'> //<![CDATA[ // Youtube Responsive setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3); //]]> </script>
  4. Then, click Save Template.
To add a videos on your blog, Copy and paste the code below on HTML column on your post. And then, click Publish to see the result.

<div class="videoyoutube"> <div class="video-responsive"> <div class="video-youtube loader" data-src="Copy And Paste Embed Video Link Here"> </div> </div> </div>
For Example :

<div class="videoyoutube"> <div class="video-responsive"> <div class="video-youtube loader" data-src="https://www.youtube.com/embed/BxuY9FET9Y4"> </div> </div> </div>


For Result :


Enough of tutorial about How To Upload Responsive Youtube Video On Blog. If you have any questions or suggestions, please write in the comments field below or directly send questions through the Contact Us service. Hopefully this article useful and you willing to share this article through social media accounts you have.



Thanks For Your Visiting


EmoticonEmoticon

Subscribe to: Post Comments (Atom)