Home

Embedding a Flash movie/animation in your "XHTML strict" compliant page

Sat, 2006.06.03 - 05:51 — müzso
I've tried to embed a Google video on a page of my website and ran into several problems with the original HTML code that you get from the "Embed" link on the Google video page.

Here's a sample code generated by Google:
<embed
  style="width:400px; height:326px;"
  id="VideoPlayback"
  align="middle"
  type="application/x-shockwave-flash"
  src="http://video.google.com/googleplayer.swf?docId=-671184977191327454"
  allowScriptAccess="sameDomain"
  quality="best"
  bgcolor="#ffffff"
  scale="noScale"
  wmode="window"
  salign="TL"
  FlashVars="playerMode=embedded"
></embed>

And here're the problems that I ran into:
  1. The <EMBED> element is not part of XHTML 1.0 Strict at all! You have to substitue it with the <OBJECT> element.
  2. Even today many use the old CLASSID and CODEBASE parameters with the <OBJECT> element, however these do not work with Firefox (and I suppose with any Mozilla-based browser). You should use the "type" attribute with an "application/x-shockwave-flash" value as also suggested by Google's example.
  3. Beware that in IE if you supply the width and height of a flash movie (I mean the <OBJECT> element) in the style attribute as "100%", then it will display only a black box instead of the video ... at least it did this for me with a Google video. So give the width and height absolute values.
  4. The <OBJECT> element has no "ALIGN" attribute, so to center it on the screen assign a margin-left: auto; margin-right:auto; style to it or to its surrounding <DIV> element.
  5. You have to replace special characters with character references (aka. entities) in your URLs in both the <OBJECT> element's "data" attribute and in the <PARAM> element containing the "movie" parameter. In the HTML 4.x specification (which is the basis for XHTML 1.0) it says: "The attribute value may only contain letters (a-z and A-Z), digits (0-9), hyphens (ASCII decimal 45), periods (ASCII decimal 46), underscores (ASCII decimal 95), and colons (ASCII decimal 58)." So theoretically all other characters should be escaped ... however the W3C validator did not complain about slashes, the equal-sign ("=") or a question mark in my URLs. Wink The validator complained only about "&" characters since they are used for character entities in HTML.
  6. IE's flash plugin (or IE itself?) does not support the "noBorder" value for the "scale" parameter. I suggest you stick with the default "noScale" instead.
That's all I've found. The above rules should be followed with any Flash content, not just Google videos.

Here's an example for an XHTML Strict compliant Flash embedding:
<div style="margin-left: auto; margin-right: auto; width:580px; height: 490px;" class="embeddedvideo">
  <object width="580" height="490" type="application/x-shockwave-flash" data="http:&#47;&#47;video.google.com&#47;googleplayer.swf&#63;docId&#61;-671184977191327454">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="http:&#47;&#47;video.google.com&#47;googleplayer.swf&#63;docId&#61;-671184977191327454" />
    <param name="quality" value="best" />
    <param name="bgcolor" value="#ffffff" />
    <param name="scale" value="noScale" />
    <param name="wmode" value="window" />
    <param name="salign" value="TL" />
    <param name="FlashVars" value="playerMode=embedded" />
  </object>
</div>

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
Sat, 2006.06.03 - 18:43 — airwin

XHTML

XHTML is the successor of HTML4, but the base of XHTML is XML. It is nothing more than an XML with root element "html" which declares the XML namespace as xhtml (e.g. "http://www.w3.org/1999/xhtml"). Furthermore its document syntax is declared with an XHTML Document Type Definition.

So the attribute's DTD specifies which characters are valid in that attribute.

Sat, 2006.06.03 - 21:18 — müzso

DTD says "CDATA"

The HTML4 DTD specifies only that URI attributes are of CDATA type. But where's it defined what CDATA means? Shock It's certainly not in the DTD of HTML4.x ...
I reached back to the HTML4 spec for a definition of CDATA because I did not find any hints in the XHTML spec about attribute values or CDATA.

Sun, 2006.06.04 - 19:56 — airwin

HTML and XML references

For the XML character data spec see http://www.w3.org/TR/2004/REC-xml11-20040204/#syntax

The HTML4 specification has some cloudy directives here: http://www.w3.org/TR/html4/types.html#h-6.2