Using Lightbox with Youtube Video

[vanbao]

1) Script Title: Lightbox Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tbox/index.htm

3) Describe problem: I would like to use this script to display a video samiliar to the way it is being used to display an image. In other word, I will have a link say "view Video" when a visitor clicks on, it will bring up the video with the current lightbox effects.

Thanks.

[jscheuer1]

Lightbox has no support for iframe, which is the preferred method for showing and dismissing Flash (what Youtube uses) video. It is the dismissing of Flash that is the trickiest. The iframe must be emptied.

Here is ThickBox - a Lightbox 'clone' that supports iframe (and other methods):

http://jquery.com/demo/thickbox/

It claims it will work with Flash, but doesn't say so with certainty. I have my own 'clone' call Mybox:

http://home.comcast.net/~jscheuer1/side/mybox/

The server is acting up a little bit at the moment though. Hopefully it will be OK when you try it. The code works.

[vanbao]

John,

I looked at your codes for the mybox clone. However, I am uncertain which option to use for importing video. I used a different js from dynamic drive which works fine but I think if we can use the lightbox script, it will look for fancy. Here is what I meant.

http://www.gomaika.com/businessDirect/listing.php?id=1

Hoover your mouse over the link "video"

If I can use the light box JS to fetch the video instead of the current JS which if you dont' keep the mouse on the screen, the box disappear.

The example you have on your page fetch a page that contains a video. What I want is to fetch the video directory from youtube. So I think to do that, one way is somehow to have the tags for the page and the tags for the video (with out the link to the video) wrapped around the tags:

<a href="url_to_page" rel="iframe" rev="iframe_attributes" title="optional_caption">Link_Text_or_Image</a>

So the "url to the page" woould be the url to the video from YouTube.

Do you have any ideas.

Thank John.

[jscheuer1]

looked at your codes for the mybox clone. However, I am uncertain which option to use for importing video.

The example you have on your page fetch a page that contains a video. What I want is to fetch the video directory from youtube.

Well, make up your mind, you either don't know or don't like it. I'm kinda just kidding around with that.

Anyways, I think that you will find that the Flash video format more or less needs to be in an iframe in order to be effectively dismissed from the page. Getting it on the page is relatively easy, the problem comes when you want to dismiss it without first stopping it, the sound tends to continue on. Iframe works good for that though, because at the same time you hide the iframe, you can load a blank page into it. This stops the video unequivocally.

If it is merely a matter of having a link with the name of the video in it, our external page can have that name.

[vanbao]

John,

Please forgive me for my lack of knowledge in Javascritp. What I was refering to is that the script references an external page that is containg a video:

<a href="http://home.comcast.net/~jscheuer1/side/mybox/mybox_vid.htm"..... as shown below.


<a href="http://home.comcast.net/~jscheuer1/side/mybox/mybox_vid.htm" rel="iframe" rev="width::425::height::350::scrolling::no::frameborder::1" title="Box News">My Box in a Box, the movie - in My Box</a> (iframe/video - iframe is best for videos)<br>


However, with youtube, the tags are:
<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/WIeNlLwEZkw&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/WIeNlLwEZkw&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

So my question is how to I insert the youtube tag in the script. I tried it several ways but it did not work.

Thanks John.

[jscheuer1]

This may not work in some browsers, but in Opera 9.24, FF 2.0.0.22, IE 7, and Safari 3 Win, it appears as though you can just use the URL to the video:

<a href="http://www.youtube.com/v/WIeNlLwEZkw&rel=1" rel="iframe" 
rev="width::425::height::350::scrolling::no::frameborder::1" 
title="BBQ News">Hill Country BBQ</a>

But most folks like to use an external page.

[vanbao]

Thank you John.

That works perfect for the video. I am thinking to also use it for the Google map. Do you know if this might work as well as Google map is dynamically generated.

Here is the link.
http://www.gomaika.com/businessDirect/listing.php?id=9

Thanks John,

[jscheuer1]

I'm not sure, you could try it. I'm not even sure that I know what you mean. Mybox will allow you to put content right on the page (just not Flash and videos) and have it called fourth in the box from a link. It could also work with the iframe method:

There are four types of mybox content you may use:

1. Content that is on the page already that is fetched by its id.
2. Content that is a single image, fetched by the url to the image.
3. Content that is a separate page to be presented in an iframe, fetched by its url.
4. Content that is a separate page to be imported via Ajax, fetched by its url.

But for that (iframe) you would probably need a separate page with the map code on it.

[vanbao]

John,

I am loving this script for the youtube. It looks so nice.

Quick quuestion, it is posible to displacy the title of the video on top of the video window next to the "close" text.

That would be wonderful if that can be done.

Thanks John.