jquery-oembed-all append iframe to a div makes page too slow to render

Question

I'm using a plugin jquery-oembed-all. Plugin provides oembed featues to dynamically embed external urls into the site.

Plugin does all the heavy lifting of resolving oembed content and then does the following:

oembedContainer.append(oembedData.code);

Where oembedContainer is a dynamically generated span on local page that will hold the embeded fetched contents and oembedData.code are the actual contents fetched.

oembedData.code could be an iframe too which is the usual case for youtube and other video contents.

If I have many videos on the same page, now each iframe takes hell lot of time to load and my page busy indiciator never stops. I find it difficult to scroll the page as well unless all the iframes are fully loaded.

I wonder how facebook provides such a smooth UI (yeah, they're facebook.)

Any suggestions, how can I improve this situation?

Answer 1

I just had a look at the code to see why it is slow.

Youtube does not supply a JSONP option for oembed (see here), meaning that the library can't get the oembed over a browser directly. To get around this Yahoo YQL is used to get the OEmbed data and wrap it in some JSONP. YQL takes some time to return data (1-2 seconds I find) so with lots of requests it will take a long time.

There are 2 options for this: 1. get Youtube to add JSONP to it's oembed - not likely as it was asked for and they have said that since it is not part of the official spec they wont support it. 2. Change the library to go back to using iframe lookup :) - Far more likely - just add a ticket on github and I'll see what I can do.

Andrew