Adding a Youtube Video in the Background of a Blogger blog tricks by alphause

Helplogger Home Blog DesignWidgets SEO Menus Po ... Adding a Youtube Video in the Background of a Blogger blog 2 comments Some of you might have wondered how to put a video to play in the blog's background, so that instead of having just a color or an image, to have a video. We can do this thanks to thejQuery plugin Tubularthat lets you use a YouTube video as a background of a web page. Although the result can be very original and attractive, I must say it has three drawbacks: they can not be silenced, if the video has ads, they will also appear, and it can slow the loading time of the blog, so if anyone wants to use it, may consider putting it only on special occasions, or on blogs that load very quickly. Also it can be done in HTML5, the problem with this method is that you need to load the video in 3 different formats (.mp4, .webm and .ovg) along with a picture for browsers that do not support them, so this YouTube option seems more practical to me, despite the drawbacks. You can see it working on this demo blog Steps 1.The first step is to just above thetag, this script: And this one too: 2.Then locate the tag (CTRL + F) Or if you are using a template from Template Designer, find this line: 3.Under either of these two, add this:

4.Now search for thetag, and before it put this:

Save the changes and that's it. In red you must put the ID of Youtube video, the ID are the characters that appear at the end of the URL: Remember:There is no option to mute, so if you don't want to have sound as in the demo blog, you have to choose a video that has no sound. I also recommend using a video in HD in case you don't want any black parts to show around it. If you are using jQuery, remove other versions that you have to avoid duplication and have problems. Author | jQuery Tubular Like 0 Random Posts Multi Hover Effect On Blogger Images Using Pure CSS31/05/2013 - 11 Comments Ways To Increase Page Impressions and Traffic on Your Blog11/04/2012 - 13 Comments How To Use The New Blogger HTML Editor12/04/2013 - 30 Comments Related Posts: jQuery Sliding Panel with Expanding... How to add a thumbnail image/photo ... Using JQuery + EasyDrag to Move Ele... How to Add Numbered Page Navigation... Add a Custom jQuery Lightbox To Blo... 2 comments: Lara Lesmes 10/13/2013 thanks for the post! really helped. Would it be possible to add a string of videos that would play in a random order on every page load? so that every time the page is loaded there is a different one thanks Reply Lara Lesmes 10/13/2013 Thanks for the post! really helped. Would it be possible to add a string of videos that play in a random order every time the page is loaded? so that on every load a different video is played. Thanks! Reply Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,785 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments irsah imihar Customizing will always be easy with jquery and javascript. Even... Missy G Yay! Thank you for making this so easy! This is just what I... divakar sivashankar admin i have a problem even if i add the tag the ad is showing up... Anonymous I don't understand the instructions you have given :( Nanette Benablo your site is very helpful and easy to follow tutorials. thank you... Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger 0 Like