How to get rid of white space around an <embed> element?

StackOverflow https://stackoverflow.com/questions/712459

  •  23-08-2019
  •  | 
  •  

Question

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.

Was it helpful?

Solution 7

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.

OTHER TIPS

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

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.

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.

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>

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>

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;
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top