ansaurus

Question

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

Answer 1

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 2009-04-03 03:35:48

I forgot to mention that I am.

Darko Z 2009-04-03 03:36:13

It seems to work for me: http://media.nodnod.net/embed.html -- unless I'm misunderstanding the whitespace you're talking about?

thedz 2009-04-03 03:39:21

please see latest edit

Darko Z 2009-04-03 03:43:02

Set display: block on the embed. See: http://media.nodnod.net/embed.html

thedz 2009-04-03 03:46:39

it still looks the same....

Darko Z 2009-04-03 03:57:28

The embed is currently taking the full width and height -- check it in Firebug. For example: http://media.nodnod.net/embed_block.jpg

thedz 2009-04-03 04:01:54

Are you trying to have the embed scale to fit the div or scale the div to fit the embed?

thedz 2009-04-03 04:04:12

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 2009-04-03 05:13:07

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 2009-04-03 06:32:30

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 2009-04-03 19:46:29

Answer 2

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 2009-04-03 03:51:23

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 2009-04-03 03:58:38

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 2009-04-03 04:16:00

Have you tried applying the border directly to the embed?

jeroen 2009-04-03 04:25:59

yes, its in the same position as the div border

Darko Z 2009-04-03 05:09:42

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 2009-04-03 18:35:43

Answer 3

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 2009-04-03 04:07:49

see comments to jeroens answer

Darko Z 2009-04-03 05:10:16

Answer 4

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 2009-04-03 04:10:54

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 2009-04-03 05:24:30

Answer 5

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 2009-04-03 04:59:08

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 2009-04-03 05:11:28

Answer 6

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 2009-08-24 01:28:48

ansaurus

tags:

views:

answers:

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

related questions