homepage Welcome to WebmasterWorld Guest from 23.23.8.131
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
How to position video over image?
mouloudia



 
Msg#: 4336876 posted 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>
&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 !

 

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4336876 posted 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&amp;hl=en_US&amp;rel=0&amp;color1=0xffcc99&amp;color2=0xcc6600&amp;hd=1&amp;border=1">
<param name="movie" value="http://www.youtube.com/v/Ax2zR346yj4?
fs=1&amp;hl=en_US&amp;rel=0&amp;color1=0xffcc99&amp;color2=0xcc6600&amp;hd=1&amp;border=1">
<param name="wmode" value="transparent">
</object>

</div>

</body>
</html>



birdbrain

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved