Hey Guys, I'm trying to build a "movie trailer" type website, and I'm having some trouble with the video elements centering properly. For some reason the video I embed in the page is offset to the left by about 75px. I can adjust the difference in the margins, but I know it's not right and won't translate properly for other browsers/resolutions. The website I want to build is extremely simple. A countdown to the premiere on top, the trailer below, and a text box below with the show times. My code is pretty straight forward, but clearly I'm missing something. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Easter 2</title> </head> <body> <div id="backimg"> <img src="driveinbackground.jpg" > </div> <div id="bodywrap"> <div id="backdrop"> <center><script type="text/javascript" src="http://suncoastcommunity.com/jwplayer.js"></script> <div id="container">Loading the player ...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "http://suncoastcommunity.com/player.swf", file: "http://content.bitsontherun.com/videos/YYFZsQ4h-XxydhwdJ.mp4", height: 270, width: 480, 'skin': 'http://suncoastcommunity.com/SKIN/slim/slim.zip', autostart: "true" }); </script></center> </div> </div> </body> <style> * { margin: 0; padding: 0; } body { text-align: center; } #backimg img { position: fixed; top: 0; left: 0; width: 100%; z-index: 0; } #bodywrap { position:absolute; width: 90%; margin:0px auto; margin-top: 20px; z-index: 20; } #container { position:absolute; width: 480px; margin-left: 0px; margin-right: 0px; margin-top: 20px; margin-bottom: 0px; z-index: 40; } </style> </html> Code (markup): The only other issue I see is that I'd like the video element to be "locked" to the background image as it resizes in browsers. The reason is the design of the background is going to look like a drive in movie theater. I need the video player to overlay the "screen" in the background image no matter the browser/resolution. Is this even possible? Thank you everyone for your help. Mike
Hi, There is a lot on unnecessary code in your page. Try this instead: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Easter 2</title> </head> <body> <div id="backimg"> <img src="driveinbackground.jpg" > </div> <div id="bodywrap"> <div id="backdrop"> <script type="text/javascript" src="http://suncoastcommunity.com/jwplayer.js"></script> <div id="container">Loading the player ...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "http://suncoastcommunity.com/player.swf", file: "http://content.bitsontherun.com/videos/YYFZsQ4h-XxydhwdJ.mp4", height: 270, width: 480, 'skin': 'http://suncoastcommunity.com/SKIN/slim/slim.zip', autostart: "true" }); </script> </div> </div> </body> <style> * { margin: 0; padding: 0; } #backimg img { position: fixed; top: 0; left: 0; width: 100%; z-index: 0; } #bodywrap { margin:20px auto 0px; z-index: 20; } #container_wrapper, #container { margin: 20px auto 0; width: 480px; z-index: 40; } </style> </html> HTML: You can also remove z-index properties...
Thank you so much. That works perfect! The only thing I need to add now is a png "wrapper" for the jw player that will make it look like a drive in screen (metal frame, brackets on the bottom etc) I imagine I can just add a div in between the background and the video player. I'll just need the png to be a bigger than the video player size. However, how would I lock the video player to a specific place in the wrapper so that the frame/brackets perfectly surround the screen no matter how it's resized? Mike