| How to position video over image?
|
mouloudia
msg:4336878 | 11:24 am on Jul 8, 2011 (gmt 0) |
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>
<head> <meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type"> <title></title>
</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="<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 !
|
birdbrain
msg:4337713 | 8:49 pm on Jul 10, 2011 (gmt 0) |
Hi there mouloudia,
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 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>
|
|
birdbrain
|
|
|
