Hey guys/gals, I was pointed out to me that my light box trick was not working right in IE. I don’t use IE for the most part, so I don’t see that it was not working. I’m now use a new light box script to give me the same effect. Here is URL for the new script:

http://videobox-lb.sourceforge.net/

I’m not going to redo the videos for the light trick. You can use the same methods as before. Just change out the old lines of code with the new ones. I upload all the files into a folder called “video”. Then replaced the old header code with those lines:

<link rel=”stylesheet” href=”/video/css/videobox.css” type=”text/css” media=”screen” />
<script type=”text/javascript” src=”/video/js/mootools.js”></script>
<script type=”text/javascript” src=”/video/js/swfobject.js”></script>
<script type=”text/javascript” src=”/video/js/videobox.js”></script>

Now I had to go and update all my post on the blog with the new code.  I opened up notepad and copy the old lines from my plot, they looked like this:

<p align=”center”><a href=”http://www.youtube.com/v/rNPjvaPkSyU” class=”lightwindow page-options” params=”lightwindow_width=425,lightwindow_height=340,lightwindow_loading_animation=false” title=”mcbigboy’s SEO Intro” ><img border=”0″ src=”http://mcbigboy.com/images/intro1.jpg” width=”300″ height=”275″></a></p>

Here is the new code:

<p align=”center”><a href=”http://www.youtube.com/v/rNPjvaPkSyU” rel=”vidbox” title=”mcbigboy’s SEO Intro”><img border=”0″ src=”http://mcbigboy.com/images/intro1.jpg” width=”300″ height=”275″></a></p>

All I did was copy the video id in this case “rNPjvaPkSyU”, I’ve made the changes here for you to see. Then I copied the title and changed the image file name.  I replace the old code with those code. I upload all my post on the blog. I’ve tested it with both IE and FF.

Sometimes, when a browser makes changes or updates, some of your scripts may not work as they did before. It’s a good idea to check from time to time to see if they are working.

Has it happens same times, I don’t see the problem right before my eyes. The window as poping up but the background screen was not changing colors or going dark which the effect I was wanting. I found the problem and have made a new video to show how it fix it.

This should get it!

Now have the copy in our header and it’s time to make an image of the YouTube video what we normal embed into our blog or website. I use Snagit to copy the image and save it. Now upload it to your host and you are now ready to make the code change in your listing.

Here is the basic copy we are going to use:

<a href=”http://www.youtube.com/v/sPlYqb33kyY” class=”lightwindow page-options” params=”lightwindow_width=425,lightwindow_height=340,lightwindow_loading_animation=false” title=”mcbigboy’s SEO Intro” ><img border=”0″ src=”http://mcbigboy.com/images/lightbox_v2.jpg” width=”300″ height=”275″></a>

In fact you can use this code and just modify it. Go go YouTube and copy the URl for the video you want to add to your blog. It will look something like this:

Now we need to fix by removing the “watch?” and replacing the”=” with a “/”. So it should look like this:

http://www.youtube.com/v/sPlYqb33kyY

Now you can replace the text in the first set of code and add it to your blog and you will have done it. Watch the video will help to see how I did it.

Please leave some comments and let me know how this trick was. The more feed back I can get the better I can make this blog and videos.

Thanks

mcbigboy

Now what we have our code on the servicer, we need to add some code to the header. Now you will need to know what theme you using. If you change your theme you will need to make these changes again. Look in the folder for your current theme and find the “header.php” file. Now copy the file to you computer and open with a text editor. You can follow along the video if you wish.

You are going to look for the “</head>” statement in the code. Now look above it and will need to add this copy:

<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />

to your file. Now if you did as I did, then you will need to add “/the folder name/” to each of the lines above. I just copied the whole folder lightwindow to my root folder under my domain. So I needed to add “/lightwindow/” to each of the “scr” statements. Like this:

<script type="text/javascript" src="/lightwindow/javascript/prototype.js"></script>

Now save your header.php file and copy it back to your host.

In the next video will modify our post to use the new code!

As I as posting my first video, it came to me that I’m going to have lots of videos on one page from time to time. I don’t want people to be able to view more then one video at a time. After doing some research, I found there is code that will allow us to put images and video into a small pop-up window. This first video in 3 in series to show you have to add this code to your blog or web site.

Here is the link to the site where I got the code for the light box:

http://www.stickmanlabs.com/lightwindow/

You can download the code there and see how to install and use it. Follow along the videos to see how I used it in my blog. You can see that I used the trick here for this video too.