Have you ever tried copying the embed links from youtube to your site and create a gallery of all those videos? Furthermore, you want that these videos will appear as thumbnails and when somebody will click a thumbnail, it will open a new page with a big screen.

I have tried doing this but was unsuccessful until I found a solution. Let me share it with you here.

One day I have this idea of collecting videos from youtube. What I did was I collected the embed links and pasted it into my page. Since I want it to look like thumbnails, I modified the width and height. It was perfect until I tried clicking the thumbnails and all of them was playing simultaneously!

Obviously that is not what I want. I do not want my visitor to do that silly thing. You do not like that, do you?

So I tried tweaking on the embed link but I was not successful until I found a solution using floating div. The idea here is to create a div with the same dimension as the thumbnail. Put the div ON TOP of the thumbnail.

The first thing that you will do is to put an additional param tag for the embed link.

Param name = “wmode”
Param value = “transparent”

I put this so that the flash object will go behind the div.

In the div property, you will also have to set the z-index=1 and the position to absolute. The z-index property specifies the stack order of the element. With z-index=1, it will ensure us that the div will be placed in front of the flash object. Also note that z-index will only works on positioned elements such as (position:absolute, position:relative or position:fixed.

I hope that helps. Download the complete script.

Bookmark It

Hide Sites