youtube embed to the back

[a8le]

Hi all,

I am adding a new feature to one of my sites, which will allow users to post YouTube videos onto the site. Thats all said and done...

My problem is I have a small version of the video on the frontpage of the site. The video is width=50 height=38, as you can see that actually too small too view. And I don't want users to view it that small, I have another page with the video in a bigger more viewable size. And although, I have a link leading users there. However, I know they will click on the video thinking that it'll that them there... but clicking on the video will actually take them to the YouTube site.

My thoughts/trials:

First put the video in one div (id=div1).
Then create another div (id=div2) with a linked transparent image (50x38).
Next put divs in a main div (divM).
Finally layer everything:

#divM {
position: relative;
}

#div1 {
position: abolute;
top:0;
left:0;
z-index:-1;
}

#div2 {
position: abolute;
top:0;
left:0;
z-index:1;
}

As you can see... I was hoping to put the clickable image over the YouTube video. The css you are looking at is just one of the many, I have tried, still nothing has worked for me. Any suggestions anyone please...

-Thuan

 

[a8le]

anyone? i'll take any suggestions...

 

[a8le]

I figured it out... I did something like this and it worked:

#divM1{
position:relative;
z-index:2;
}

#div2 {
position:absolute;
top:0;
z-index:3;
}

I simply put the contents of primary div into the holder div div1+divM=divM1, then I put div2 into divM1...

<divM1>
...div1_contents
...<div2></div2>
</divM1>

I hope this helps someone else,
Thuan