Create a Lightbox for Camtasia Videos
December 10, 2008
My good friend Brian Edmondson asked about how to have videos show up in one of those cool “lightboxes” where the video jumps off the page in a box and the rest of the page dims out thereby “highlighting” the video box.
These are also sometimes called a “modal dialogue” box.
Here’s one of the many ways to do this: Create a Lightbox for Camtasia Videos
I use a script called Videobox.
In this video tutorial, I’ll walk you through the whole process to get your Camtasia videos to pop up in a cool lightbox.
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=a451d9d8-5ced-4383-815a-f53b24b723d4)
Posted in 
content rss
December 10th, 2008 at 5:14 pm
Another great video, Lon
Thanks
December 10th, 2008 at 5:16 pm
I am new to your site and I really enjoy the info however I just tried the link and when the page opens, I can watch the example however the tutorial does not work or asks me to update the latest Flash and I did and still I am unable to get it to work.
Thanks
December 10th, 2008 at 5:17 pm
You are the Master! Great video and totally understandable…
Love the humor and keeps it flowing with attention, seriousness
dissolves and enlightenment takes place.
Thanks Lon,
Cecil
December 10th, 2008 at 6:09 pm
Hey Lon…That’s an absolutely amazing videos…Kudos to you, and thanks to Brian for asking the question.
I followed the tutorial and set up a test, however I’m not getting the background grayed out like in your example.
I think it MAY be an issue with the css, I see the small black bar appear, here’s what my test video looks like. http://fortopinfo.com/lb/
Thanks for any help…
Here’s what’s in my css file …
—————————————————–
body {margin: 0;}
#lbOverlay {
position: absolute;
left: 0;
width: 100%;
background-color: #000;
cursor: pointer;
}
#lbCenter, #lbBottomContainer {
position: absolute;
left: 50%;
overflow: hidden;
background-color: #fff; text-align: center; padding: 5px;
}
.lbLoading {
background: #fff url(loading.gif) no-repeat center;
}
——————————————————–
December 10th, 2008 at 6:54 pm
ha ha, found my problem, I needed to add the ‘compliant’ code to my website.
Thanks again Lon! This will come in handy for the upcoming project
Happy Holiday!
Michelle
December 10th, 2008 at 7:15 pm
Great point Michelle! I was just about to type a response when I saw that you had found the problem.
For others that may see the same issue, try using this line of code as your DOCTYPE. This is the very FIRST line on an html page…before ANYTHING else.
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
There may well be other issues with specific CSS on a page but when I did my first testing, Internet Explorer would not “dim” the background. Changing the DOCTYPE fixed it…
Thanks!
December 10th, 2008 at 9:54 pm
Hi Lon,
Great advice yet again.
I’ll be mentioning your latest video in my next newsletter as I’m sure my readers will be thrilled to see it.
Besides. I want to avoid any of them making crappy videos
Cheers
Mike
December 11th, 2008 at 12:57 am
Hi Lon,
That was awesome, and not tooo hard,
what I really want to know is how to do
those kick ass graphics transitions that
you do, those are really cool…:o)
And it really is amazing at how much
better my videos are, now that I have
been “stalking” er uhm watching your
videos, LOL…
You really bring the thunder, and pack
in the value, bro, thanks a ton….
Best Wishes,
Jeff Davis
December 11th, 2008 at 1:05 am
Mike, thanks so much and I appreciate the shoutout in your newsletter. When it goes out could you provide the link here or via Twitter? Love to see it…
Jeff, the intro graphics are done in Adobe After Effects. I’m working on a whole suite of really cool splash videos & backgrounds. Here’s a little test I did for our great friend Bob the Teacher:
http://screencaststudios.s3.amazonaws.com/promos/bobjenkins/index.html
I’ll have a preview page full of them in a couple of weeks…and post it on the blog here of course!
Thanks!
Lon
December 11th, 2008 at 2:56 pm
Lon,
U-Da-Man!
Once again you have added to my workload
When I watched your video on customizing the Cam Preloader – I had
to add that to my videos.
Now with the lightbox tutorial…I just gotta have it.
I agree with Jeff, your graphics – splash pages & backgrounds are the best!
Looking forward to watching the next video you put out.
haha..I wonder how many people are still stuck at videobox.com
December 12th, 2008 at 8:26 pm
Lon,
As requested, here’s the link to my blog post. I’ve emailed my mailing list tonight and told then to head over to watch your video pronto!
Lon Naylors Amazing Camtasia LightBox Guide
Keep up the good work!
Mike
June 4th, 2009 at 4:22 pm
How imaginative, insightful and helpful your information is.