1. Home
  2. Forums Index
  3. Browser Side / HTML 1:51 pm May 1, 2026

Forum Moderators: open

Message Too Old, No Replies

How to absolute position video over centered image?

         

shapkunap

4:55 pm on Dec 16, 2007 (gmt 0)

10+ Year Member



Hello,
I am pretty proficient with html, just apparently not proficient enough to be able to do this. I'm sure someone here can enlighten me.
I've got a page with a doc type of XHTML 1.0 Transitional. I have an image (the layout of the site) that is centered in the browser window. It has links coded into it with an image map, and they work fine.
I also have a video that I'd like to position in a very specific spot over the image. Of course, it's very easy to do when the image is left aligned in the browser. But I can't seem to figure out how to make it work with the image centered. Here is the code as it is right now (minus the image map code). This is after I've been messing with it and trying any number of ridiculous things to get it to work so it makes no sense: 

<div style="position: relative;" align="center"><img src="myHomepage.jpg" alt="" border="0" usemap="#Map" />
<div style="position: absolute; top: 237px; left: 547px;"> <object width="280" height="234""><param name="movie" value="urltovideo"></param><param name="wmode" value="transparent"></param><embed src="urltovideo" type="application/x-shockwave-flash" wmode="transparent" width="280" height="234"></embed></object>
 </div></div>

Can anyone help? Thank you.

birdbrain

1:20 pm on Dec 17, 2007 (gmt 0)



Hi there shapkunap,

and a warm welcome to these forums. ;)

Try it like this... 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#img_and_obj_holder {
 position:relative;
 width:#*$!px; /* this width is equal to the image map width */
 height:#*$!px; /* this height is equal to the image map height */
 margin:auto;
 }
#img_and_obj_holder img {
 position:absolute;
 width:100%;
 height:100%;
 border:0 solid;
 }
#img_and_obj_holder object {
 position:absolute;
 width:280px;
 height:234px;
 left:547px;
 top:237px;
 }
</style>
</head>
<body>
<div id="container">
<div id="img_and_obj_holder">
<img src="myHomepage.jpg" usemap="#Map" alt="">
<object type="application/x-shockwave-flash" data="your_flash.swf">
<param name="movie" value="your_flash.swf"/>
<param name="wmode" value="transparent"/>
</object>
</div>
</div>
</body>
</html>

Note:-
The embed element will prevent you page from validating.

birdbrain

[edited by: tedster at 4:56 pm (utc) on Dec. 17, 2007]

shapkunap

5:05 pm on Dec 17, 2007 (gmt 0)

10+ Year Member



Thanks very much. I'll give it a try. :)

shapkunap

2:03 pm on Dec 18, 2007 (gmt 0)

10+ Year Member



For some reason it's working in Firefox, but not IE. In IE it's putting the movie in the upper left corner of the image, and behind it. Have I done something wrong? Here's my code: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
<!--
body {
margin-top: 0px;
background-color: #000000;
margin-bottom: 0px;
}
#img_and_obj_holder {
position:relative;
width:900px; /* this width is equal to the image map width */
height:1112px; /* this height is equal to the image map height */
margin:auto;
}
#img_and_obj_holder img {
position:absolute;
width:100%;
height:100%;
border:0 solid;
}
#img_and_obj_holder object {
position:absolute;
width:280px;
height:234px;
left:547px;
top:237px;
} 
-->
</style>
</head><body>
<div id="container">
<div id="img_and_obj_holder">
<img src="myHomepage.jpg" alt="" usemap="#Map" />
<object><param name="movie" value="http://www.youtube.com..."/><param name="wmode" value="transparent"/><embed src="http://www.youtube.com..." type="application/x-shockwave-flash" wmode="transparent" width="280" height="234"/></object>
</div>
</div> 
<map name="Map" id="Map">
 <area shape="rect" coords="604,497,879,533" href="features.html" />
 <area shape="rect" coords="604,537,879,571" href="camping.html" />
 <area shape="rect" coords="602,579,879,612" href="info.html" />
 <area shape="rect" coords="606,619,877,650" href="registration.html" />
 <area shape="rect" coords="604,656,879,692" href="/forum" />
 <area shape="rect" coords="606,697,877,730" href="links.html" />
 <area shape="rect" coords="604,733,880,774" href="index.html" />
 <area shape="rect" coords="453,307,531,344" href="hgfdhg.mp3" />
</map>
 
</body>
</html>

birdbrain

3:23 pm on Dec 18, 2007 (gmt 0)



Hi there shapkunap,

To get it to work for IE change this... 


#img_and_obj_holder object {
position:absolute;
width:280px;
height:234px;
left:547px;
top:237px;
}

...to this... 


#img_and_obj_holder object,#img_and_obj_holder embed {
position:absolute;
width:280px;
height:234px;
left:547px;
top:237px;
}

birdbrain

shapkunap

4:20 pm on Dec 18, 2007 (gmt 0)

10+ Year Member



Thank you. But now it works in IE, and doesn't in Firefox. In Firefox the video is now way off to the right beyond the image.

birdbrain

6:22 pm on Dec 18, 2007 (gmt 0)



Hi there shapkunap,

in that case you will need to use this variation... 


<style type="text/css">
<!--
body {
margin-top: 0px;
background-color: #000000;
margin-bottom: 0px;
}
#img_and_obj_holder {
position:relative;
width:900px; /* this width is equal to the image map width */
height:1112px; /* this height is equal to the image map height */
margin:auto;
}
#img_and_obj_holder img {
position:absolute;
width:100%;
height:100%;
border:0 solid;
}
#img_and_obj_holder object{
position:absolute;
width:280px;
height:234px;
left:547px;
top:237px;
}
-->
</style>
<!--[if IE]>
<style type="text/css">
<!--
#img_and_obj_holder embed {
position:absolute;
width:280px;
height:234px;
left:547px;
top:237px;
}
-->
</style>
<![endif]-->

Note:-
I did not have this problem as I used the Satay Method for embedding flash.

Do a google search for Satay Method or the later Bye Bye Embed

birdbrain

shapkunap

7:01 pm on Dec 18, 2007 (gmt 0)

10+ Year Member



Everything's working great now. Thanks so much for your help, and the information. You rock!

birdbrain

7:18 pm on Dec 18, 2007 (gmt 0)



No problem, you're very welcome. ;)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / HTML 1:51 pm May 1, 2026