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.
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.