How to position video over image?

hello everyone !
I am a new in the HTML world, so i search someone here who can enlighten me.
i have a facebook page, and i want to custmize it with the static html
I have an image (the backgournd of the page)
I also have a video that I'd like to position in a very specific spot over the image. Here is the code as it is right now ( i found it in this forum, but it didin't work :

<html>
<head>
&lt;head&gt; &lt;meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type"&gt; &lt;title&gt;&lt;/title&gt;
</head>
<body>
<title>EVANCE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#img_and_obj_holder {
position:relative;
width:520px; /* this width is equal to the image map width */
height:700px; /* 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:258px;
height:223px;
left:100px;
top:100px;
}
</style>
<div id="container">
<div id="img_and_obj_holder"><img
src="http://i1202.photobucket.com/albums/bb379/mouloudia007/fb001.jpg"
usemap="#Map" alt=""><object type="application/x-shockwave-flash"
data="&lt;iframe width=" 258=""
src="http://www.youtube.com/embed/Ax2zR346yj4" height="193"><param
name="movie" value="http://www.youtube.com/embed/Ax2zR346yj4"><param
name="wmode" value="transparent"></object></div>
</div>
</body>
</html>

i use KompoZer, in this softwar it's seens that work but in my facebook page its didn't work !?

sorry if my english is catastrofic ( i'm algerien ^^ ) and as you can see in the picture, there is a fire frame, i want to put my video in it !

have a good day
Peace !

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>EVANCE</title>

<style type="text/css">
body {
margin:0;
background-color:#f0f0f0;
}
#container {
width:432px;
height:614px;
padding:86px 0 0 88px;
margin:auto;
background-image:url(http://i1202.photobucket.com/albums/bb379/mouloudia007/fb001.jpg);
}
#container object {
width:330px;
height:248px;
}
</style>

</head>
<body>

<div id="container">

<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/Ax2zR346yj4?
fs=1&hl=en_US&rel=0&color1=0xffcc99&color2=0xcc6600&hd=1&border=1">
<param name="movie" value="http://www.youtube.com/v/Ax2zR346yj4?
fs=1&hl=en_US&rel=0&color1=0xffcc99&color2=0xcc6600&hd=1&border=1">
<param name="wmode" value="transparent">
</object>

</div>

</body>
</html>

How to position video over image?

mouloudia

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week