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

html css embed quicktime

13,474

Solution 1

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.

Solution 2

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

Solution 3

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.

13,474

Author by

Darko

Updated on June 12, 2022

Comments

Darko almost 2 years
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.