Firstly, I'm not sure if this post should go here, or in the HTML or CSS sections. I hope a kind admin will move it if necessary.
I'm developing a site which uses a pop-up to show QT movies. The pop-up resizes to fit a movie (180x144 or 360x288) exactly, with allowance for the controller.
That shouldn't be too difficult. And it isn't except for one snag...the movie seems to be vertically aligned in some arbitrary space on the page. In order to get the movie to fit the screen and show no white space, I have to give it a top margin of -11px (found through trial and error). Although this works, I'd like to know why this is the case, and whether there's a better way around it than this inelegant stab in the dark.
Here's the code, with the offending line in bold and red:
Code:
<?php include_once 'inc/include.php' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex, nofollow" />
<title>Video</title>
<style type="text/css" title="text/css" media="screen">
/* <![CDATA[ */
body { margin: 0; border: 0; padding: 0 }
object { margin-top: -11px; }
object.mov { display: block; }
/* ]]> */
</style>
<!--[if IE]>
<style type="text/css" media="screen">
object.mov { display: none; }
</style>
<![endif]-->
<?php
/* this simply sets the size of the movie based upon the 'res' value passed in the url */
$mov = GetURLVar('mov','-1');
$mov = $PageDetails['path'] . '/mov/' . $mov;
$res = GetURLVar('res','-1');
switch ($res) {
case 'lo':
$w = 180;
$h = 144;
break;
case 'hi':
$w = 360;
$h = 288;
break;
}
$h = $h + 39; /* adding height of controller and chrome */
?>
<script type="text/javascript" language="javascript">
// <![CDATA[
self.resizeTo(<?php echo $w ?>,<?php echo $h ?>);
// ]]>
</script>
</head>
<body>
<div>
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="<?php echo $w ?>" height="<?php echo $h ?>">
<param name="src" value="<?php echo $mov ?>" />
<param name="controller" value="true" />
<object type="video/quicktime" data="<?php echo $mov ?>" width="<?php echo $w ?>" height="<?php echo $h ?>" class="mov">
<param name="controller" value="true" />
<param name="pluginspage" value="http://www.apple.com/quicktime/download/">
You do not have Quicktime installed on your computer. <a href="http://www.apple.com/quicktime/download/" target="_blank">Download Quicktime</a>
</object>
</object>
</div>
</body>
</html>
The DIV wrapper is not important. I added it to try vertically aligning the object in a holder other than BODY, to no avail.
In order to give you some idea of what the problem looks like, I've attached a few screenshots. The first shows the window sized to the movie, but the top margin removed from the embedded CSS. The second shows a greater addition than 39px to the movie height, to indicate the overall positioning of the clip in the window. The third shows the result of my kludge. It works, but the code ain't pretty, and I'd like to know why.
Any thoughts would be appreciated....
Dev Shed Forums Sponsor:
September 18th, 2004, 04:01 AM
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
