2

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">
<html xmlns="http://www.w3.org/1999/xhtml">
    <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.

4

7 回答 7

4

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

于 2009-04-03T03:35:48.153 回答
2

WOOHOO,
I've searched a very long time for this answer and I finally found it!
You'll have to put the embed element in an object element which is in an iframe or a frame:
The iframe page

<html>
<body>
<iframe src="sample.html" height="100%" width="100%">
</iframe>
</body>
</html>


the iframe source

<html>
<body>
<object height="100%" width="100%">
<embed src="sample.mov" height="100%" width="100%"/>
</object>
</body>
</html>

Make sure that the height and width value in the iframe, object and embed element the same is.

于 2011-05-14T11:11:53.707 回答
0

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.

于 2009-04-03T03:51:23.903 回答
0

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>
于 2009-04-03T04:07:49.433 回答
0

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>
于 2009-04-03T04:10:54.327 回答
0

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;
于 2009-04-03T04:59:08.110 回答
0

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.

于 2009-08-24T01:28:48.473 回答