'__flash__removeCallback' is undefined when deleting DOM element with Youtube iframe

Question

I have a div with a Youtube video embedded via iframe.

<div id="container">
    <div id="video">
        <iframe width="480" height="360" src="http://www.youtube.com/embed/LiyQ8bvLzIE" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

I change the content of #container with an ajax call

$.get(url, function(data) {
    ('#container').html(data);
}

Now I get the following error in IE9: "SCRIPT5009: '_flash_removeCallback' is undefined".

I tried removing, deleting,... the video and/or iframe before the ajax call but that doesn't work:

<script>
    $('#video').html('')
</script>

<script>
    $('#video').empty()
</script>

<script>
    $('#video').remove()
</script>

<script>
    $('#video iframe').attr('src', '')
    $('#video').empty()
</script>

<script>
    $('#video').hide()
    $('#video iframe').attr('src', '')
    $('#video').empty()
</script>

...

But now I'm out of idea's...

Answer 1

Finally I got the solution.

I don't know which server side language you are using, I'm using PHP. Anyway find if the browser is IE9 then use object tag.

if (preg_match('/MSIE 9.0/', $_SERVER['HTTP_USER_AGENT'])) { /*for IE 9.0 generate with objace tag*/ ?>
     <object type="application/x-shockwave-flash" data="VIDEO_URL">
      <param name="movie" value="VIDEO_URL" />
      </object>
 <?php } else { /*rest of all browsers,in iframe*/ ?>
      <iframe src="VIDEO_URL"></iframe>
 <?php } ?>

In short use object tag for IE9 and iframe for rest.

Answer 2

I got the solution.

ytplayer.getIframe().src='';

Answer 3

If you still want to continue using the iframe code, you can remove the iframe src by calling removeAttr (instead of trying to set it to blank).

$('#video iframe').removeAttr('src')