views:

874

answers:

6

SUMMARY: an embed with 100% width and height pushes its parents size to be 100% width and height of the grandparent. How do I get the embed element to collapse all the white space around it so that it fits the width and height of its parent perfectly?

I have a page with an image, which upon being clicked gets replaced by an embed element that plays a quicktime movie.

The problem is that the embedded movie has a large amount of white space around it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
 <head><title></title></head>
 <body>
  <div style="border:1px solid #000;">
  <embed id="iframeMovie" height="100%" width="100%" controller="true" target="myself" href="" src="http://images.apple.com/quicktime/troubleshooting/mov/qt_installed.mov" type="video/quicktime"></embed>
  </div>
 </body>
</html>

The video is of unknown size so how do I get rid of this whitespace while leaving height and width at 100%?

EDIT: Though it doesn't show, I am actually clearing the padding and margins. The white space still remains.

EDIT 2: The white space in question is between the movie and the black border, not the black border and the browser.

A: 

Are you clearing the default browser margin and padding? Otherwise, you need to do that.

Most people use CSS reset styles to normalize margin and padding across browsers. A good one to use is Eric Meyer's: CSS Reset

EDIT: To remove the space underneath the embed, set display: block on the embed. See: http://media.nodnod.net/embed.html

thedz
I forgot to mention that I am.
Darko Z
It seems to work for me: http://media.nodnod.net/embed.html -- unless I'm misunderstanding the whitespace you're talking about?
thedz
please see latest edit
Darko Z
Set display: block on the embed. See: http://media.nodnod.net/embed.html
thedz
it still looks the same....
Darko Z
The embed is currently taking the full width and height -- check it in Firebug. For example: http://media.nodnod.net/embed_block.jpg
thedz
Are you trying to have the embed scale to fit the div or scale the div to fit the embed?
thedz
im not sure what is so difficult to understand about "want to get rid of whitespace between the movie and the black border"....
Darko Z
Because there's two types of whitespace at work here, and you're failing miserably at clearly defining which you're talking about. The embed element itself has whitespace under it that's fixed by display block. The movie isn't scaling with the embed, causing the visual effect of "whitespace".
thedz
look buddy, its not my problem if you fail at simple comprehension. Again, how can you not understand "white-space between black border and movie" and how come everyone else here has had no problems understanding it?
Darko Z
A: 

I am not familiar with embed elements, but it seems to me that when you set the width to 100%, you set it to the width of the parent element, which is a div in this case and a div occupies the whole available width as it is a block element.

So you can either float the surrounding div or display it inline to have its size adjust to the contents instead of the available space around it.

jeroen
This seems to be the right direction, however the black border is still not hard up against the movie and the height is still 100% of the browser.
Darko Z
Do you have an example online with the updated styles? From what I see above, the width should be 100% of the browser window, but the height should only be the height of the embedded element (the 100% height on the embed should not do anything I think).
jeroen
Have you tried applying the border directly to the embed?
jeroen
yes, its in the same position as the div border
Darko Z
That would be because the embed element itself is set to 100% width and height but the content (the movie) has a fixed size and does not scale. Have you tried wrapping the embed in another div - inline displayed with border - just to test?
jeroen
A: 

Try setting float: left on both the div and the embedded element just like this. That will remove the extra white space.

<div style="border:1px solid #000; float: left; width: 100%; height: 100%;">
   <embed id="iframeMovie" height="100%" width="100%" style="float: left" controller="true" target="myself" href="" src="http://images.apple.com/quicktime/troubleshooting/mov/qt_installed.mov" type="video/quicktime"></embed>
</div>
Dhana
see comments to jeroens answer
Darko Z
A: 

Hmm...

It's an ugly hack, but you could use a table:

<table width="100%" height="100%">
  <tr>
    <td align="center" valign="middle"><embed /></td>
  </tr>
</table>
Randolpho
Thats definitively a step in the right direction. however the embed still has white space around it. All the white space must be gone.
Darko Z
A: 

Have you used a DOM inspector to verify the whitespace isn't part of the embed?

Also, you can put it in a panel/div/etc and mess with the css:

position: relative; top: -10px; left: -10px; overflow: hidden;
tsilb
yes it is part of the embed. I could easily do what you say if i knew the dimensions of the movies displayed. the embed elements are of variable height
Darko Z
A: 

it turns out that theres no way of doing this other than making the movie scale to the size of the parent by using scale="aspect".

While not the perfect solution, it will have to do for now.

Darko Z