Thread: HTML gurus, help me

I'm working on integrating streaming HD video into my website (flash). I'm getting it close to how I want it to look, but I'm pretty inexperienced with flash (and not much more experienced with HTML).

Please check the following pages and view source:

http://www.matthoover.com/gallery/sk...ck_4.0-HD.html
http://www.matthoover.com/gallery/sk...o_2008-HD.html

I am trying to create a border around the whole flash object (player + controls), but the bottom bit of the border is getting cut off. I'm sure there's a much better way to do this?

Here it is right now snipped from the source:

Code:

<div style="text-align:center; width:800px; height:456px">
	<div style="float:left; width:69px; height:398px">
	</div>
	<div style="float:left; width:650px; height:398px; border: solid #e5e5e5; border-width:medium; border-style:ridge">
	<script type="text/javascript" src="http://www.matthoover.com/jw/swfobject.js"></script>
		<div id='player'><a href='http://www.adobe.com/go/getflashplayer'><img src='http://www.adobe.com/images/shared/d...layer.gif&#39; alt='Get Adobe Flash player' /></a>
		</div>
	<script type="text/javascript">
	var so = new SWFObject('http://www.matthoover.com/jw/player....9;#000000&#39;);
	so.addParam('allowscriptaccess','always');
	so.addParam('allowfullscreen','true');
	so.addParam('flashvars','&file=http://www.matthoover.com/video/Z-Flock_4.0-HD.mp4&backcolor=000000&frontcolor=FFFFFF&screencolor=000000&skin=http://www.matthoover.com/jw/skins/modieus.swf');
	so.write('player');
	</script>
	</div>
</div>

Originally Posted by Ewok

According to my browser your div with the 'player' tag is getting expanded to be 404 pixels high, which explains the cutoff. I believe that even though you're telling the flash player to be just 398px, its slightly larger, which enlarges the player div, so it cuts off the bottom border. Try enlarging the div containing 'player' to be slightly larger (like 406px high) and see what happens.

Btw getting a browser with a web inspector is invaluable for stuff like this, because it will report on the exact run-time dimensions of every entity in the page.

Chrome 2 beta and Safari 4 beta have the best web inspectors (builtin), followed by Firefox with the Firebug addon.

Yeh, I tried expanding the div with the border, and I can get it to show along the bottom, but then there is a grey gap between the control bar and the border. Not the effect I'm looking for. If you look closely at the corners of the border along the bottom you can see that it already extends below the control bar as far as it needs to. It's as if it is running "behind" the player but the player isn't even there.

Not sure what a web inspector is, never heard of that. Guess I could try it tonight, but I'm not sure it will help me here.