YouTube videos are embedded to web pages for various reasons and when you embed these videos through the most usual method that makes use of iFrame Tags, then have you ever known these videos add extra pounds to your web page? What happens when your web pages get into an overloaded size, is very well known by many. You get the negative impact on the SEO front. Also, the page loading time of your site gets increased. If you wonder why, the reason is a video from YouTube in your web pages makes 12 HTTP requests and downloads 400 KB data. Also, the web page has to download the resources of 400 KB and these are needed to be downloaded even if the visitors do not want to watch the video. Here is how to embed YouTube videos more efficiently.
The Cons:
There are two reasons why this is not comfortable for the owner for the web page and the visitor as well:
- The web page has to download 0.4 MB in addition
- The visitor’s system has to make multiple HTTP requests
How to embed the videos efficiently?
You can find the solution in Google Plus. This reduces the loading time that gets increased because of the embedded YouTube video. The entire video is not shown in the web page. Instead the visitors get to see the thumbnail of the YouTube video and also there is an icon to play the video, which pictures the video has to be played from the thumbnail. A standard video player can be seen once the play button is hit by the visitor and the thumbnail is replaced by it. In this case, only if the visitor likes to watch the video, the extra resources of CSS, java script worth of 400 KB are downloaded. Otherwise, the web page does not require these additional 0.4 MB.
The Code:
The embed code for the YouTube videos need to include
- Height of the player
- Width
- The unique YouTube Video ID
The height and width are to be specified in pixels. In the regular code all you need to specify are these information that are corresponding to your web page. With this little or no effort, you can see that the size of your web page is greatly reduced. You can see the difference of 300 KB in minimum.
For people who have site that has large number of visitors per day and if the traffic of the site is high, you need to do the following. You need to make a copy of the minified youtube.js from googlecode.com. Then you need to host this copy on your server.
