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?

Solution 1

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.

Solution 2

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

Solution 3

There is no question getting multiple videos from different websites takes time. Have you tried obtaining a copy of those videos, upload it to your web server and embed your videos that way? It may increase rendering speed of your pages if the videos come from a single source.

Comments

[VirtuosiMedia]

Thanks for the suggestion, chutsu. It's a good point, but unfortunately, I don't think it'll be possible to obtain copies other than just embedding the videos.

[chutsu]

Why not? You can download the flash videos with the firefox plugin "FlashGot" (use good old google for more info on how to download 'flv' videos). And embed the flv video on your website.

[Leonel Martins]

I dont think putting all the medias on the same server would make it faster. Most of big sites put images and other static content in another host to improve speed. The main reason is because browsers have a maximum number of simultaneous connctions to a single host. And if the YouTube server can be more fast than yours server.

[William Entriken]

Thanks for working on this. I am trying your fix at: acls.net/videos.htm to no avail.

[reverie_ss]

the link is broken!

[Asfandyar Khan]

This solution is not suitable, It has many issues. When overlay of play button will loading the same video multiple times if you click on it again and again. Same video will repeat

[William Entriken]

The solution is to "load an image stub, then load the full player when the user clicks" and that is suitable. You will need to adapt the implementation if necessary to avoid multiple clicks or other side cases.