Embeding Flash in Facebook Dialog box

UPDATE: Some of the techniques below are no longer working in Facebook. Please find an updated technique here: Updated: Embeding Flash in Facebook Dialog Box

Ran into more work than I expected on this, and didn't find much in the way of resources out there to help.

Here's the scenario: on a Facebook page tab (profile tab) want to have links that open a dialog box with a youtube video. In my case its a nice image map (css driven) of images that open the video the image represents.

Primary challenges:
fb:swf fbml must be used. Actually there is now a createFBMLObject() in FBJS and the only object it will create is fb:swf but its in beta and there isn't much documentation yet.

Attempt #1:
After much research and trial and error I got this as a workable solution:
use fb:dialog with the fb:swf as the content block

<a title="Pop up video" href="#"  clicktoshowdialog="tubeIt1"></a>
<fb:dialog id="tubeIt1" cancel-button="true">
<fb:dialog-title>Luxury</fb:dialog-title> 
<fb:dialog-content>
<fb:swf 
swfsrc='http://www.youtube.com/v/PQHPYelqr0E&hl=en_US&fs=1&'
imgsrc='http://www.someurl.com/static/images/PorkAndBeans.jpg' 
width='430' height='295' />
<span>Pork and beans!</span>
</fb:dialog-content>
<fb:dialog-button type="button" value="close" close_dialog="true" /> 
</fb:dialog>

This solution works well enough and is easy, however it introduces a problem - if a user opens the dialog, then closes it, then opens it again the video can no longer be played (the static image is not clickable).

Final solution:
Final solution I landed on was to have fbjs create the dialog and just store the fb:swf in a fb:js-string. This removes the need to click through the static image to play the flash in the dialog box.
However it didn't work the second time the dialog was opened as the flash had already been injected. The workaround to that turned out to be replacing a marker in the dialog with the fb:js-string variable.

Here it is:

<script language="javascript">
var dialogCounter = 0;
var dialogActive;


function showVideo(title, video) {
if(dialogCounter > 0)  return false; //don't allow more than one instance of this dialog
else {

dialogCounter += 1;

dialogActive = new Dialog();

dialogActive.showMessage(title + dialogCounter, dialogText); 

dialogActive.onconfirm = function() { dialogCounter = 0; }

document.getElementById('dialog_content').setInnerFBML(video);

return false;

}
}



</script>

<fb:js-string var="dialogText">   
<div id="dialog_content">
Marker to be replaced
</div>  
</fb:js-string> 

<a title="Pork and Beans" href="#" onclick="return showVideo('Pork and Beans', tubeIt1)"></a>

<fb:js-string var="tubeIt1">
<fb:swf 
swfsrc='http://www.youtube.com/v/PQHPYelqr0E&hl=en_US&fs=1&'
imgsrc='http://www.someurl.com/static/images/PorkandBeans.jpg' 
width='430' height='295' />
<span>Pork and Beans!</span>
</fb:js-string>

The other annoyance was that the dialogs stack on each other causing the user to have to "ok" each one individually if they open more than one. Introducing the dialogCounter variable prevents any new dialogs from being opened if one is already open.

Hope this saves someone else some time!