tags:

views:

505

answers:

3

I have a HTML simple page with a ADD THIS button (the share button actually) and some videos on it. My problem is that when I click on the SHARE button and a small window (a div) pop ups on the center of the browser screen which is keeps it position constant there.

When I scroll the window, this ADD THIS window gets overlapped by the videos on the page. This works good in Firefox but not in IE and Chrome.

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title></title>
    <style type="text/css">
        #at16p, #atie6ifh
        {
            overflow-y: auto !important;
        }        
    </style>
</head>
<body>
    <!-- AddThis Button BEGIN -->
    <a class="addthis_button" style="text-align: right;" href="http://addthis.com/bookmark.php?v=250&amp;amp;pub=xa-4ac61e0801642c41"&gt;
        <img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16"
            alt="Bookmark and Share" style="border: 0" /></a><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pub=xa-4ac61e0801642c41"&gt;&lt;/script&gt;

    <!-- AddThis Button END -->
    <center>
        <div id="divVideoDisplay" runat="server" style="width: 100%; padding-bottom: 20px;
            z-index: -10000; overflow: hidden;">
            <br />
            <h1>
                First Video</h1>
            <br />
            <object type='application/x-shockwave-flash' data='http://www.videowebtown.com/community/newlightplayer/flvplayer.swf?file=http%3A%2F%2Fsq.txdnl.com%2Fvwt%2Fd%2Fa%2Fv%2Fi%2Fdavidmarsh98%2Fvideo%2F26198%2FFLV%2F98188.flv' style="z-index: -1;" 
                width='640' height='480' bgcolor='FFFFFF' border='1'>
                <param name='movie' value='http://www.videowebtown.com/community/newlightplayer/flvplayer.swf?file=http%3A%2F%2Fsq.txdnl.com%2Fvwt%2Fd%2Fa%2Fv%2Fi%2Fdavidmarsh98%2Fvideo%2F26198%2FFLV%2F98188.flv'/&gt;
                <param name='bgcolor' value='FFFFFF'/>
                <param name='Windowless' value='true'/>
                <embed src='http://www.videowebtown.com/community/newlightplayer/flvplayer.swf?file=http%3A%2F%2Fsq.txdnl.com%2Fvwt%2Fd%2Fa%2Fv%2Fi%2Fdavidmarsh98%2Fvideo%2F26198%2FFLV%2F98188.flv'
                    quality='high' bgcolor='#ffffff' width='640' height='480' name='movie' allowscriptaccess='sameDomain'
                    type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'
                    border='1'>
            </object>
            <br>
            <b style="color: red">FREE</b> service provided by <a href='http://www.videowebtown.com'
                target='_new'><u>VideoWebTown.com</u></a>
            <br />
            <h1>
                Second Video</h1>
            <br />
            <object width="425" height="344" style="z-index: -1;" >
                <param name="movie" value="http://www.youtube.com/v/rrrx9izp0Lc&amp;hl=en_US&amp;fs=1&amp;"&gt;
                </param>
                <param name="allowFullScreen" value="true"></param>
                <param name="allowscriptaccess" value="always"></param>
                <param name='Windowless' value='true'/>
                <embed src="http://www.youtube.com/v/rrrx9izp0Lc&amp;hl=en_US&amp;fs=1&amp;" type="application/x-shockwave-flash"
                    allowscriptaccess="always" allowfullscreen="true" width="425" height="344">
        </embed>
            </object>
        </div>
    </center>

</body>

</html>

Any help/comments appreciated.

A: 

Try adding <param name="wmode" value="transparent">

This is a well-known bug in IE, but I'm not sure why it doesn't work in Chrome, so I'm hoping this will solve it for both browsers. Also, have you checked the Z-index just to be sure? (This doesn't matter for IE, but it might for Chrome)

PatrikAkerstrand
I'd actually use opaque for the value. If the player had some transparent colors, the HTML behind it would be shown through (unless that is what you want, of course)
Victor Jalencas
Well this worked for the first video in my code but not for the second one. :-(Can't guess why is it so?
Manish
+2  A: 

Well this code required

<param name="wmode" value="transparent">

to be added to the object tag and also the <embed> tag required an attribute as wmode="transparent".

i.e. <embed wmode="transparent" ... />

This worked for me.

Manish
A: 

It works 100% Thanks :)

aboosoft
@aboosoft: Sure. But just FYI, this area is for answers. If you want to comment on an answer or a question, use the `add comment` button and post it there.
Manish