CODEWITHSUNDEEP
jqueryhtmldomvimeo
Hendeca
Hendeca

Reputation: 943

How can I reduce stutter when adding an embedded vimeo player to the DOM with jQuery?

When adding an embedded Vimeo video player to the dom using append, there is a noticeable stutter as the flash player loads. I've tried without success to ease the loading process. I tried fading in the content, but it seems that the fading in does nothing to ease the actual displaying of the flash player in the browser.

I've thought about trying to add it to the dom with visibility hidden and then fade it in after the video is actually loaded, but haven't had any success with this so far. It seems like generally the rendering of the flash video is a completely different issue from the visibility of the embedded element in the dom.

I'm using the provided Vimeo embed code from the Vimeo video page. Any ideas on how to ease this process?

For the moment I'm not including code because they question is pretty simple, but I can provide some examples if clarification is needed.

Upvotes: 1

Views: 386

Answers (1)

Fresheyeball
Fresheyeball

Reputation: 30015

Place a div with position absolute over the Vimeo (using z-index), give this div some kind of an opaque background and text that says 'loading' or something. Alternatively you can use a solid color that matches the background of your site. Load the Vimeo behind this div, set a timeout and then fade out the overlay div, revealing the video.

Upvotes: 1

Related Questions