Preloading a youtube embed

Question

I want to have an embedded chromeless youtube video preload its video WITHOUT playing when the page loads. Right now I'm using an awkward "play then quickly pause" script which causes small problems (half-second audio leaks and fails quite a bit). For this seemingly simple functionality, is there a better/more elegant way to preload?

Answer 1

I had the same question and came across this question. After some research, I think I found a cleaner, albeit similar, answer.

When the JavaScript API calls OnYouTubePlayerReady, you press play and add an event listener to onStateChange that will be called every time the player changes from buffering to play.

For example, inside the function you listen for state 3, which is buffering, and as soon as it's called, you pause the video.

You can see this technique in action in this jsFiddle.

Side note: I refrained from using a JavaScript framework in my example, but you could easily put one into place here.

Also, I was unable to abstract the script tag out of the body of the HTML using jsFiddle, but an external script.js file works just fine on my own server.