YouTube iFrame API: Performance Issue

Question

I have "TAB" on page reflecting different YouTube Video. I use Iframe API to load Video on Demand. Everything works fine on all Browser Except for IE 8 [Our page is HTML 5]. It start giving Unspecified Error as mention here [YouTube iframe API error on line 49 then I realise change my "Remove" video code and the problem is solved.

However now when a user click on TAB, it first make whole screen blank, then Render Video and after couple of seconds bought complete page. Since it is just Javascript to change and put new DIV with ID and then new Player, it is should not happen like that. Frankly new page load is faster than removing and putting new Youtube video within page.

Any Idea on how to improve performance?

function AddVideo(videoid,playerid){
    if(player != undefined) {
        stopVideo();
        player.destroy();
    }
    jQuery("#player").remove();
jQuery("." + playerid).html('<div id="player"></div>');
player = new YT.Player('player', {
  height: '360',
  width: '623',
  videoId: videoid,
  events: {
    'onReady': onPlayerReady,
    'onStateChange': onPlayerStateChange
  }
});
}

Above is my JS code, which remove and put player back. HTML has li followed by a tag with Data-youtube and parent DIV reference where I add "player" div and then add iframe youtube video too.

Not just performance, sometime it is not even showing complete page but only Video Player. Any IDEA ? — Sumit Gupta

Sumit Gupta Sumit Gupta · Accepted Answer · 2013-02-19T08:09:49

Okay, I found solution in StackOverFlow, that I hide the Iframe before I remove it, so it is now great !!!

YouTube iFrame API: Performance Issue

1 Answers