Make embed behave like a div

Question

I would like to add some css to make the <embed /> tag look like a <div>. Currently it adds an arbitrary height and width that often lead to a scrolling box similar to an iframe.

Does anyone know an "embed reset" to make it behave like a div?

Edit: Really I just need to figure out how to get the height to be based on the inner content. Here's what I have so far:

embed {
    width: 100%;
    display:block;
    margin: 0;
    /* Below from Eric Meyer's Reset */
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Thanks, Matt

Can you say a little bit more about what you're really wanting to do. Is wrapping the embed in a div not an option for you? — Jamie Dixon, Jul 29 '11 at 14:51
I want to load content from someplace else and have it flow the exact same way a div would. No an embed in a div wouldn't do - but the solution only has to work in modern browsers (it's for dev) — Matt, Jul 29 '11 at 14:54
wrap it in a `div` and give the `embed` `height="100%"` and `width="100%"`. Then use css to size the `div`? Or is this not what you mean? — Bazzz, Jul 29 '11 at 14:56
Are you using HTML5? If not I'd avoid using the non-standard embed tag in place of the object tag — Jamie Dixon, Jul 29 '11 at 14:56
Yah, it's for development. A solution that *only* works in latest chrome, safari, and firefox would be dandy — Matt, Jul 29 '11 at 15:01
@Bazzz Thanks for your thoughts. This would be a worst case solution, but I might have to take it if nothing else. — Matt, Jul 29 '11 at 15:02
As far as I can tell w my tests, videos in `embed` tags size fine. What styles do you need to apply to the `embed` that are not working? — Jason Gennaro, Jul 29 '11 at 15:37
@Jason Thanks for your response. For me, it's a matter of not needing to know the height or width and having the content inside determine the appropriate fit, just like any other div. — Matt, Jul 29 '11 at 15:38
@Matt. Ok. I find that is happening already in my tests. Is there a particular style you want to add that is not working? Or can you provide a link to somewhere to show the problem with the `height` and `width`? — Jason Gennaro, Jul 29 '11 at 15:47
@Jason Here you are: http://jsfiddle.net/K8nCn/. Now in my example i'm not loading an external side (local html file) but same concept. Could I make an iframe behave like a div? — Matt, Jul 29 '11 at 15:52
I am not sure if this will achieve what you are wanting but you have not put semicolons after your `width:100%` or `display:block`. — tw16, Jul 29 '11 at 16:19
Haha, good catch. That was a typo. It was right in my code though :-/ — Matt, Jul 29 '11 at 16:21

nes1983 · Answer 1 · 2011-07-29T17:16:01.070

0

Just a wild guess. Does

 <embed style="display:block; width: 100%; height: 100%">

work for you? (Here's the explanation for display:block).

Note that the height and width attributes of embed elements must be pixels, not percentages, and thus aren't much helpful here.

edited Jul 29 '11 at 17:16

answered Jul 29 '11 at 14:57

nes1983

15,209
4
44
64

1

that is a "very" wild guess, considering the embed tag is something inside an object tag hoping that inline styles will work on it, AND work on it as expected, AND in every browser, is ... quite a guess. :) – Bazzz Jul 29 '11 at 14:58
Not quite. The height doesn't work correctly. Thanks for your thoughts though – Matt Jul 29 '11 at 14:59
And if you try and specify width and height? – nes1983 Jul 29 '11 at 17:16

score 0 · Answer 2 · answered Jul 29 '11 at 17:37

What happens when you style the <object> tag too?

object, embed {
    width: 100%;
    display:block;
    margin: 0;
    /* Below from Eric Meyer's Reset */
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

score -1 · Answer 3 · answered Jul 29 '11 at 16:33

-1

You can add width=100%; and height=100%; to the tag itself.

<embed src="http://google.com" type="text/html" width=100%; height=100%;>

http://jsfiddle.net/jasongennaro/K8nCn/1/

Important: this will only work if there is enough window space for the content. (drag the fiddle to see the scroll bars disappear)

You probably already know this but embed is intended for interactive content such as videos and audio. [1, 2]

I would say serving Web content is better done through an iframe or some other method like php + cURL.

answered Jul 29 '11 at 16:33

Jason Gennaro

34,535
8
65
86

That violates the HTML5 specification, as width and height must be pixels, not percentages: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-map-element.html#attr-dim-width. – nes1983 Jul 29 '11 at 17:14
Thanks @nes1983. I'm not sure it violates the spec, though. *Must* is not implied, IMO. I read *may*. *"The width and height attributes on img, iframe, embed, object, video, and...input elements* may *be specified...in CSS pixels."* – Jason Gennaro Jul 29 '11 at 17:19
Cool! This looks pretty good. I can't test it now because I'm getting on a flight in a few minutes, but I'll check it out later. Thanks! – Matt Jul 30 '11 at 09:48

Make embed behave like a div

3 Answers3