Is there a way to load embedded YouTube videos faster on my website?

Question

I'm writing a blog post that uses multiple videos from YouTube and Yahoo Video, but I'm not happy with how long it takes the page to render. Apart from using an ajax-y method to load the videos, are there any tricks that would make the page load quicker with multiple videos from different sources?

Answer 1

The problem with embedded YouTube videos is that the player itself needs to load. You could add "controls=2" in the URL of the embedding code, but that would make only AS2/3 players to load the player after clicking.

The workaround Google+ has for this issue is not to load the player at all. Instead, it loads a thumbnail image with a play button superimposed. On clicking, the image is replaced with the actual YouTube player iframe embed code and it loads and auto-plays.

This can be done in any site actually using the simple javascript below. https://skipser.googlecode.com/files/gplus-youtubeembed.js

Answer 2

Your "ajax-y method"s will be the only way to speed this up. Large sites are going to be using a CDN and have good caching. There is no way around large files taking a long time...

Keeping the object or video tag out of the HTML and then adding it after page load, will improve perceived page load performance. Perhaps swap out an screengrab image that is the same size as the eventual video...

It's early days for the video tag, but it's possible that eventually it's initialization time will be faster than Flash, since it's part of the browser and not a 3rd party plugin.

The bulk of the video load time depends on how the video was encoded/transferred which is out of your control, it sounds like.