Using a Video as a Link

[vanbao]

I would like to be able to use an image of an embedded video as a link to somewhere else other than the source of that video. In other words, Youtube allow people to embed the videos using the following tags:

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

If I want to have a link that use this video, can that be done. I tried doing the following:

<a href="http://www.yahoo.com">

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

</a>

This does not seem to work.

Please help.

[Master_script_maker]

you can't use a flash object as a link, the flash object has to be able to receive the clicks. sorry. (youtube movies are flash objects)

[djr33]

Short answer: no possible

Longer answer: you can probably fake it.

You could position an element on top of the video using CSS and then have that act as a link.


Also, I'm a bit confused about what you said about "image", because you could just take an image from the video (if needed through a screen capture) and use that as a standard img element with an a href tag.

[vanbao]

That is a good idea to use the css or create separate link on top of the video to link it to the page I want.

The reason I can not use screen capture to create an image is because my videos user entered which could be thousands of videos. I am using the lightbox to play the videos instead of linking the videos back to Youtube. That is why I wat the youbute thumbnail that shows up to be an active link that will activate the lightbox when clicked.

I know the Youtube thumbnail is an image that Youtube create from one of the frames of the video. If we can find where that image is stored, we can use the source of that image as the src for the link.

[vanbao]

Ahah, I found the location where Youtube stores its images. It is located at:

http://img.youtube.com/vi/PRv_czxZKUw/1.jpg where the codes in red is the reference to the video.

In my template, I have the following codes to display and play the video:


<script>
var image = "<?php echo $custom_34; ?>"
if (image != "")
{
document.write("&nbsp;&nbsp;&nbsp;<a href=\"http://youtube.com/v/PRv_czxZKUw&autoplay=1\" rel=\"iframe\" rev=\"width::425::height::355::scrolling::no::frameborder::1\" title=\"+title.substr(0,60)\"><img src=\"http://img.youtube.com/vi/PRv_czxZKUw/2.jpg"></a>")
}
else {
document.write("<a href=\"/members/user_login.php\"><img src=\"template/Yellow/images/no_video.png\" class=\"borderimage\" onMouseover=\"borderit(this,'green')\" onMouseout=\"borderit(this,'white')\"></a>")
}
</script>

The link in blue is what the user will enter as the source of the video. My question no is if there is any script that will take the link in blue and modify to to resamble the tag in red. I see that the difference between the link in blue and red are the addition of "img,vi,2.jpg" in the red link.

Or if there is a script that take the video link that the user enter and strip out the video reference code PRv_czxZKUw. If this is possible, I can setup my template to inclue "http://img.youtube.com/vi/XXXXXXX/2.jpg as fixed with XXXXXX=PRv_czxZKUw part being the variable that the script will insert.

[vanbao]

Does any one have an answer to my question on the post above. I am looking for a script that whenever a url to the video is entered, it will extract the video codes from the url and enter it into the image url.

In other word,

http://youtube.com/v/PRv_czxZKUw

it will rewrite into

http://img.youtube.com/vi/PRv_czxZKUw/1.jpg

[Master_script_maker]

<script type="text/javascript">
var url = "";
if (url != "")
{
document.write("&nbsp;&nbsp;&nbsp;<a href=\"http://youtube.com/v/"+url+"&autoplay=1\" rel=\"iframe\" rev=\"width::425::height::355::scrolling::no::frameborder::1\" title=\"+title.substr(0,60)\"><img src=\"http://img.youtube.com/vi/"+url+"/2.jpg"></a>")
}
else {
document.write("<a href=\"/members/user_login.php\"><img src=\"template/Yellow/images/no_video.png\" class=\"borderimage\" onMouseover=\"borderit(this,'green')\" onMouseout=\"borderit(this,'white')\"></a>")
}
</script>