54 Reader Comments

The embedded “Quicktime for IE-only trick”:/d/byebyeembed/justforie.html supposedly shows nothing in non-IE browsers. This is not entirely correct since it *does work* in Opera 7.54, Safari 2.0.3 and OmniWeb 5.1.1 (on Mac OS 10.4.6). Funny thing is that IE 5.2 (Mac) does _not_ work.
The “full solution”:/d/byebyeembed/forall.html indeed works as advertised, even in IE5.2-Mac.

Very useful article, thanks. I’m implementing this into my website now. It’s worth noting that the control toolbar for Windows Media Player is included in the ‘height’ variable (intensely irritating as it may be). For IE6 and Firefox 1.5 on Windows XP this is an extra 45 pixels, but I don’t know if this is the same across all browsers and operating systems.

To JavaScript, or not to JavaScript. For me, there are no alternative options but to always use JavaScript when embedding rich media content.

As we all know, the latest versions of IE 6 (with the recent security update) and IE 7 beta permanently changed the behavior of assets embedded using ActiveX. This is especially detrimental to Flash, where users must click an annoying dialog box button to activate the movie before it can load/playback. While this is (for now) and IE only issue, it may as well affect all browsers because of IE’s ubiquity.

With that, the easiest way to get around IE is to embed your Flash movies using JavaScript, with SWFObject (http://blog.deconcept.com/swfobject/) the best one out there (IMO). It requires only a few lines of code, provides Flash Player version detection, and allows you to easily offer alternate content to those without the Flash Player (or JavaScript enabled for that matter).

You can simply use a series of [removed] calls to do the same thing, and avoid the page weight hit of embedding a medium sized external JS file, if page weight is a concern. But that’s prone to human error, and can be a real pain in the arse to maintain.

My points are mostly related to the complexities of embedding Flash content and not necessarily QT or Windows, but after years of tinkering with alternate ways for embedding Flash content and detecting player versions I’ve yet to find a better solution than using JavaScript.

We had a lot of problems lately with video and the latest install of Firefox (1.5.04). We were using the embed tag to display our video files and it only worked on about half of the desktops with the latest firefox install. After hunting high and low this was the fix that solved the issue. Very timely info, thanks for the fix.

elizabeth, this article made my month! man, i’ve been scouring the net for this answer for months now. my ad school friends entered a contest recently and asked me to embed their current.tv flash video on my blog to help get them some votes ... and i reluctantly agreed knowing that it would totally ruin my perfectly valid code that i worked so hard to maintain. but your tips helped fix all my issues and now i can go back to being OCD. so thanks!

I had noticed the Safari/Firefox conflict myself in object param markup and mounted my own examples a few months ago <http://www.q7design.demon.co.uk/QTMovieMarkup> before submitting a report to webkit. As both markups validate with the W3C validator it is not clear to me which style of object markup is correct, as I find the W3C spec. completely incomprehensible. Anyone out there understand it?

Few months ago I published similar way how correctly insert a Flash into XHTML (see http://www.dgx.cz/trine/item/how-to-correctly-insert-a-flash-into-xhtml). This method doesn’t require to insert any twice!

I have found out the same trick with conditional comments as Lachlan Hunt figured out, syntax-highlighed explanation is here http://www.dgx.cz/trine/item/the-magic-with-conditional-comments.

This is great. I’m wondering if we can modify it so that it doesn’t use the IE conditional in the HTML. Try adding a class (“outterObject” in this example) to the parent object, and this to the global CSS file:

Unfortunately, IE doesn’t seem to see the nested object tag as nested, otherwise you wouldn’t need to set the default height and width values to 0 for object tags.

This of course means that you have to remove the height and width from inline on the object to the style sheet, which is a good thing, since it’s a display property anyway (and it will enable you to modify it for other media types).

I’ve only tested this for Firefox and IE6 on the PC, so I’d love to hear any feedback.

A possible word of caution here: From my experience with the Flash Satay method to embed Flash movies into pages, using the <object> tag causes browsers to download the Flash movie completely before playing it, instead of being able to begin playing the movie as soon as enough of the content has been streamed in. I noticed a pause before the movie started playback in the article example… perhaps due to the same reason? All I know is that for Flash movies, with <embed>, content seems to be able to be streamed, whereas with <object>, the entire object must be downloaded before playback can begin.

In my own personal projects and in design work that I do for my clients, I tend to try to use Flash Satay as much as possible, but only when the Flash content is inconsequential to the main “meat” of the page, and is just acting as visual “icing on the cake.” When my clients demand heavy Flash content, I still have to resort to the twice-cooked method for any kind of streaming to occur. (Preloaders don’t seem to be able to counteract this effect, either.) Anyone else have any experience with regard to this?

Test - valid form, Huf/Johansson: (note: IE6, IE5 should show nothing, all other browsers should show a result)
I am
<!—[if gt IE 6]><!—>
either a non-IE/Win browser, or IE/Win >6, or ancient.
<!—<![endif]—>

—
The test for IE versions can of course be reversed by changing the conditional test from gt to lt.

Note that this technique will fail for ancient IE/Win browsers <=IE4/Win.

as the new initial comment just before the nested object. This limits the comments’ effect to only IE 5, 5.5, and 6 (assuming it fails in IE4, I did not test it :) and lets IE7 work properly on its own (ignoring the second object element that it does not understand).

This article got me playing with Flash again, and I noticed an oddity in Firefox; the browser appears to rely on page stying to display Flash movies when only the object tag is used.

If you exclude the width and height attributes from the object tag, the movie won’t appear at all (I guess it can’t read the movie’s intrinsic values). But, even when you do set the width and height, if you turn styles off (View > Page Style > No Style), the movie will vanish.

The embed tag doesn’t suffer from this quirk, not that I’m condoning its use—but I don’t see a workaround.

I’ve done some testing using “BrowserCam”:url:http://www.browsercam.com and the technique seems _very reliable_. I use this technique for CSS filtering (but with additional IE/Mac filtering on top), and it’s fantastic. For the benefit of anyone who wants to use know whether they can safely take advantage of this, here’s the browsercam blitz in full.

I know that within an XHTML document it is proper to type tags in lowercase but I believe that when referring to a tag (or attribute) within an article it is perfectly fine to render them in all caps. Thus . . .

“The use of embed has gone on too long.”

would be perfectly valid as

“The use of EMBED has gone on too long.”

It really helps readability for me when I am reading an article such as this. Looking forward to the sixth edition of your book, Elizabeth. Actually checked Barnes and Noble for it yesterday.

We are developing a filter to allow members to more easily publish youtube and other videos into our global social network. Without altering and breaking the rest of the site layout of course. This article helps considerably! Our core platform is Drupal and we plan to publish back the results once completed.

Great article but the whole object-in-an-object markup concept is just plain bad to me, and smells of the ol’ embed solution of olden days. Ive got a much simpler solution that works cross-browser and is xhtml compliant. Mine uses two object tag sets and display:none to hide one set based on the browser. One for IE active x and the other for all the others. Some special fixes as well, but uses simple CSS to show and hide each type for each browser. Works on MAC as well (IE and Safari), and works with Flash, Quicktime and any multimedia object you may have. Can even be used as a replacfement for the old iframe. Check it out when you get a chance and send comments:

The following properties are supported for use with the name attribute of the PARAM element. “Param tags”:http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wmplay10/mmp_sdk/paramtags.asp All these work with IE and Media Player ActiveX plugin (the object with classid). Don’t use old deprecated Media Player 6.4 properties with Active-X plugin.

In Parentheses is specified what you should use with NPAPI-plugin ie. in second object or embed for Firefox, Opera, Safari etc.

Note also that according to specs autoStart is true by default so it is not necessary to specify it.

I have used the object tag to inlcude a Flash video (.FLV) and it seems to work well. Maybe Flash video is the way to go - more people have the plug-in and progressive download means the entire file doesn’t have to be downloaded at once.

If you are using QT you need to provide alternatives which could be confusing for the user. I am not sure whether Flash video will be more accessible though - it will need more testing.

Strange. Both test versions wouldn’t stream in FF (on winXP) until they fully loaded, then they played fine.

But the final for standards loving browsers version actually crashed my FF; this is the very first time that my FF has crashed.

I don’t want to know why the it crashed my FF. It did. Period. I lost all my open tabs (including a lengthy, unposted, reply to someone on why their page was blowing up (because among other reasons, they had used the <embed> tag!). If the solution here crashed on me, it may crash on one of my visitors ... I can’t take the risk of lost respect or patronage.

There has been a problem with replacing the damn <embed> tag with a valid “cross-browser-perform-as-intended” <object> tag for over five years now and it seems as if the problem still exists.

As a standards compliant web coder, I often wonder why I bother fighting with tableless css layout to make them cross browser compliant, when tables were simply so much easier (most likely because I resent MS arrogance). Much of the time the box model hacks don’t work as expected (or IE keeps finding a way to occasionally blow up my layout just for spite).

And now, trying to find a valid replacement for the <embed> tag is also turning into the same kind of frustrating hit or miss art project. With many brilliant mad scientists’ experiments out there that work most of the time for most of the people and some of the time for some of the people yet hardly ever for a few poor saps.

There will eventually be a true working solution. Until then, I applaud those who keep trying. So <“embed” sound of applause>. But back to the drawing board.

I’m having most difficulties getting Windows Media to play in Firefox, especially if I don’t want the video to autostart. There is also problems getting ASX files played among all browsers. Pointing directly to the WMV file usually works fine, but if you wrap it in an ASX file, I’ve found the content type ‘video/x-ms-asf’ to work better than the ‘video/x-ms-wmv’ proposed in this article.

And either way, I can’t find a way to display WMP’s controls in Firefox, so if you manage to get ‘autostart=0’ to be respected, there’s no way to actually start the video since there’s no play button. Frustrating.

I tried to implement this technique to embed an IFRAME content while not using the iframe element. I spent quite a few hours in doing this and came home with some results, and a lot of informations on how current UA deals with supposed standards.

If you are interested, find the post here: http://exploded.awcr.org/iframe

I’ve tried to use the <object> non ActiveX solution and worked just fine with IE 6 in WinXP. But with Firefox I could’nt make to work with the status bar. I’ve used and it didn’t work in Firefox. I’ve also tried , but it didn’t work also. This parameter didin’t work with either Firefox and IE 6, both WinXP.

Robson,
With IE use ActiveX and with other browsers use NPAPI. And remember to use conditional comments especially since some Firefox users might have unofficial ActiveX plugin(ax in user-agent string)

I’m at my wits end… I have used every code I know to embed a WMV file on my splash page, yet it keeps appearing with the controller, even though I have controller=false in my code. (C:\Websites\CHLBI\chl_splash1.htm)

Well, I now have a hybrid of the Castro method and the Apple method….and I’m begingin to loose control of things!

All was going well - even IE 6.0.29 with SP2 under Win XP Pro was behaving (as was Safari 2.04, FF 1.5.0.8 & IE 5.2 all under Mac OS X)! Then I installed FF 2.0 under Win XP Pro - and now I’m back to square 1 with pormpts to install stuff!

It seems as soon as you fix this for one bunch of browsers, and begin testing on the next - the bubble pops. Is there a definitive version of the code structure out there will enable the embedding of MP3 files with a controller, without having to click through a thousand dialogues and sign your life away? Is it really that much to ask for?

Anyone come across the problem with scrolling embedded videos within scrollable DIVs?

I have embedded a video (youtube,google) within a scrollable DIV and upon viewing them on the mac browsers — Safari, Opera, OmniWeb and InternetExplorer, it produces an undesired effect.

Firefox seems to be an exception, but the browsers mentioned above doesn’t recognise the boundaries of the DIV. So the video is not hidden at all within the confines, and when you scroll down to view the rest of the content underneath, a ghost image of the video remains..

Here is a link for a simple demo
http://mcdxliv.cabspace.com/sample.html

The coding is straight forward. I just want to know if this is a known issue, if so are there any methods around it.. (searching the web has been to no avail). Also are PC users experiencing the same?