Websites that allow to embed their multimedia Flash contents usually provide HTML code to be included on your blog/site.
If you need XHTML Strict code, some changes have to be made. First of all, you have to get rid of the embed tag and use instead the object tag.
In most of the cases, the value of the data attribute in the object element will be the same as the value specified in one of the param elements.
You have also to remember to change every occurence of the "&" character with the "&" entity.
Or you can just relax and use my conversion tool...
I've written a degradable tool (Javascript and PHP) that automatically converts your code to valid XHTML 1.0 Strict:
The conversion tool is also available as a Google Gadget, that can be included in your website or in your iGoogle page. If you use the Opera browser (and I hope you do!) you can also download the conversion tool as an Opera Widget.
Next, I'll show some practical examples of transformations from HTML to XHTML for mutimedia contents provided by: YouTube, Veoh, Deezer, Yahoo, DailyMotion, Revver, Brightcove, Hulu, Metacafe, Megavideo.
Original HTML code:
<object width="425" height="355"> <param name="movie" value="http://www.youtube.com/v/qdeMqqghXRI&rel=0"></param> <param name="wmode" value="transparent"></param> <embed src="http://www.youtube.com/v/qdeMqqghXRI&rel=0" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed> </object>
XHTML Strict code:
<object type="application/x-shockwave-flash" width="425" height="355" data="http://www.youtube.com/v/qdeMqqghXRI&rel=0"> <param name="movie" value="http://www.youtube.com/v/qdeMqqghXRI&rel=0"></param> <param name="wmode" value="transparent"></param> </object>
If you want the video to start automatically, you need to add the string: &autoplay=1 in the data attribute and in the value of the movie parameter.
If you want the enable the fullscreen mode, you need to add the string: &fs=1 in the data attribute and in the value of the movie parameter. You also need to add a new parameter: <param name="allowFullScreen" value="true" />.
Example of the conversion into XHTML 1.0 Strict, resolving all validation errors:
HTML code:
<embed src="http://www.veoh.com/videodetails2.swf?permalinkId=v535965tH84qqTp&id=2004410&player=videodetailsembedded&videoAutoPlay=0" allowFullScreen="true" width="540" height="438" bgcolor="#000000" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed> <br/><a href="http://www.veoh.com/">Online Videos by Veoh.com</a>
XHTML Strict code:
<object type="application/x-shockwave-flash" width="540" height="438" data="http://www.veoh.com/videodetails2.swf?permalinkId=v535965tH84qqTp&id=2004410&player=videodetailsembedded&videoAutoPlay=0"> <param name="movie" value="http://www.veoh.com/videodetails2.swf?permalinkId=v535965tH84qqTp&id=2004410&player=videodetailsembedded&videoAutoPlay=0" /> <param name="allowFullScreen" value="true" /> </object>
If you want the video to start automatically, you need to edit the code fragment: &videoAutoPlay=1 in the data attribute and in the value of the movie parameter.
HTML code:
<div style="width:180px;height:45px;"> <object width="180" height="29"><param name="movie" value="http://www.deezer.com/embedded/blogplayer_3.swf?path=173748&color1=990000&color2=cc6600&color3=cc9900"></param> <embed src="http://www.deezer.com/embedded/blogplayer_3.swf?path=173748&color1=990000&color2=cc6600&color3=cc9900" type="application/x-shockwave-flash" width="180" height="29"></embed> </object> <a href="http://www.deezer.com" style="border:none;margin:0;padding:0;"> <img src="http://www.deezer.com/embedded/footer.jpg" alt="free music" title="free music" border="0" style="border:none;margin:0;padding:0;" /> </a></div>
XHTML Strict code:
<div style="width:180px;height:45px;"> <object type="application/x-shockwave-flash" width="180" height="29" data="http://www.deezer.com/embedded/blogplayer_3.swf?path=173748&color1=990000&color2=cc6600&color3=cc9900"> <param name="movie" value="http://www.deezer.com/embedded/blogplayer_3.swf?path=173748&color1=990000&color2=cc6600&color3=cc9900" /> </object> <a href="http://www.deezer.com" style="border:none;margin:0;padding:0;"><img src="http://www.deezer.com/embedded/footer.jpg" alt="free music" title="free music" style="border:none;margin:0;padding:0;" /></a> </div>
HTML code:
<object width="512" height="323"> <param name="movie" value="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.1.15" /> <param name="allowFullScreen" value="true" /> <param name="flashVars" value="id=2918320&vid=611392&lang=en-us&intl=us&thumbUrl=" /> <embed src="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.1.15" type="application/x-shockwave-flash" width="512" height="323" allowFullScreen="true" flashVars="id=2918320&vid=611392&lang=en-us&intl=us&thumbUrl=" > </embed></object>
XHTML Strict code:
<object type="application/x-shockwave-flash" data="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.1.15" width="512" height="323"> <param name="movie" value="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.1.15" /> <param name="allowFullScreen" value="true" /> <param name="flashVars" value="id=2918320&vid=611392&lang=en-us&intl=us&thumbUrl=" /> </object>