Cloning a silverlight embed object results in an empty white element

Question

I have a page with a few silverlight embed objects. One player is visible and all others are hidden (display: none). When I click a thumbnail the code clones the corresponding, hidden object and replaces the visible player with this cloned object.

This works fine in Firefox, Chrome and IE9, but in IE8 it doesn't work properly. The visible player gets replaced, but this results in a big white empty silverlight player. If you right-click this white element, it shows a silverlight context menu, but nothing else. No error in console or some other clue.

The website with this problem is online at: http://www.vioranje.nl
Open it in IE8 and click the play buttons underneath the titlebar "web afleveringen" to see what happens.

This is the jQuery code that clones the Silverlight players (which is attached to the click event handlers of the thumbnails):

var embedType = (element.data().embedtype) ? element.data().embedtype : 'object';
var $embed = $element.find('.large .embed '+embedType);
var $newplayer = $(this).find('.embed');
var newplayerHTML = $newplayer.html();
var $newplayerInstance = $(newplayerHTML);
$embed.replaceWith($newplayerInstance);
$newplayerInstance.show();

What can I do to resolve this problem?

Answer 1

I've tried to debug your case, and It seams like IE8 processes the tag and re-write it as the following:

<OBJECT data="data:application/x-oleobject;base64,QfXq3+HzJEysrJnDBxUISgAJAACuLQAAuh8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=" width=442 type=application/x-silverlight-2 height=307 checkedByCssHelper="true"></OBJECT>

Which apparently looses the Parameters you are passing to the Silverlight video player Object.

Here is trick that might help you solving your issue for all browsers, Try to use a instead of using a to hide your embed tags, By using the tag .. your Silverlight Code will not be executed while its hidden, because it'll be treated as Text not as an HTML Code.

So in your HTML Template Code "tpl_rtlxlvideo":

Replace:

<div class="embed" style="display: none;">{YOUR OBJECT TAG}</div>

With:

<textarea class="embed" style="display: none;">{YOUR OBJECT TAG}</textarea>

And for the Javascript side:

Replace:

var newplayerHTML = $newplayer.html();

With:

var newplayerHTML = $newplayer.val();

Hope that helps you :)