Hey everyone I'm today going to help you in a very productive trick which can help your blog look more exotic and it will definitely help you in attracting more visitors to your blog.
One of my friends recently asked me about this that if we can put a video as background to blogger blog. So, special thanks to him for giving such a great idea for a post. After a lot of searching I have finally got a trick.
Let's come to the topic straight away, there are some disadvantages too of this trick like :
- Slow down your blog's speed
- You can't do anything when it shows YouTube ads
- You can't pause the video
But there are many many features too like :
- New look
- Increase traffic
- Different design etc.
For this trick your blog should not have large width. It should not be more than 700px including sidebar, So that users enjoy the video. For more excellent view you can make your template a little bit transparent so that video is clearly visible.
How to embed YouTube video to your blogger background?
First of all you need to do is relax. Now login to your blogger account and select your blog you want to personalize. Go to Dashboard >> Template >> Edit Html and press Ctrl + F and search for </head>. Just above that place the following code
After doing that search for <body> tag and paste the below code and if you don't find that code search for the similar code
Now find for </body> and just above it paste </div>
Remember to replace YouTube video ID 61BLn00AN_w with your.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[/* jQuery tubular plugin|* by Sean McCambridge|* http://www.seanmccambridge.com/tubular|* Copyright 2012|* licensed under the MIT License|* Enjoy.|*|* Thanks,|* Sean */var videoWidth = 853;var videoRatio = 16/9;var defaultDiv = 'wrapper-video';jQuery.fn.tubular = function(videoId,wrapperId) {wrapperId = (typeof(wrapperId) == undefined) ? 'wrapper-video' : wrapperId;t = setTimeout("resizePlayer()",1000);jQuery('html,body').css('height','100%');jQuery('body').prepend('<div id="yt-container" style="overflow: hidden; position: fixed; z-index: 1;"><div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div></div><div id="video-cover" style="position: fixed; width: 100%; height: 100%; z-index: 2;"></div>');jQuery('#' + wrapperId).css({position: 'relative', 'z-index': 99});var ytplayer = 0;var pageWidth = 0;var pageHeight = 0;var videoHeight = videoWidth / videoRatio;var duration;var iframe = '<iframe id="myytplayer" width="' + videoWidth + '" height="' + videoHeight + '" src="http://www.youtube.com/embed/' + videoId + '?autoplay=1&controls=0&modestbranding=1&showinfo=0&hd=1&iv_load_policy=3&version=3&wmode=transparent&loop=1&playlist=' + videoId + '" frameborder="0" allowfullscreen></iframe>';jQuery('#ytapiplayer').html(iframe);jQuery(window).resize(function() {resizePlayer();});return this;}function onYouTubePlayerReady(playerId) {ytplayer = document.getElementById("myytplayer");ytplayer.setPlaybackQuality('medium');ytplayer.mute();}function resizePlayer() {var newWidth = jQuery(window).width();var newHeight = jQuery(window).height();jQuery('#yt-container, #video-cover').width(newWidth).height(newHeight);if (newHeight > newWidth / videoRatio) {newWidth = newHeight * videoRatio;}jQuery('#myytplayer').width(newWidth).height(newWidth/videoRatio);}//]]></script><script type='text/javascript'>//<![CDATA[$().ready(function() {$('body').tubular('61BLn00AN_w','wrapper-video');});//]]></script>
After doing that search for <body> tag and paste the below code and if you don't find that code search for the similar code
<div id='wrapper-video'>
Now find for </body> and just above it paste </div>
Remember to replace YouTube video ID 61BLn00AN_w with your.
0 comments:
Post a Comment
Your comments are most welcome. But don't spam.