Jun 24, 2015

Embedding YouTube Videos with Fast Loading and Responsive View

The embedded YouTube videos make your page heavy and slow down your page load times. The page load time is important factor for a web page because
– Site Speed improves user experience. There are different surveys and case studies which show poor experience with slow sites.
– In the era of Mobile, Tablet.. devices, site speed must be good to get accessed everywhere.
Google also cares about site speed for search criteria.

So, this post explains how to embed YouTube videos with fast page loading for better user experience.

Video:

This video covers how to embed YouTube video and comparison of Standard and Optimized embed:

How to Embed:

1. Open YouTube Optimized Embed Code Generator

2. Enter YouTube video URL, height and width.

3. Select the checkbox options as you want.

4. Click “Preview and Generate Code” button. It will load your Video as preview with two code boxes.

YouTube Optimized Embed Code Generator

5. Copy the HTML code and Place it wherever you want the video to appear on your page.

6. Copy the JavaScript code and paste it on your page once, ideally right before the closing </body> tag.

Note: In case of multiple videos, you have to put HTML codes where you want to display videos, but Javascript code must be included once.

7. Open your page in browser, play the video and enjoy it. Also, it is responsive means mobile/tablet friendly.

How it works:

Instead of loading the full YouTube video player, It displays a thumbnail of YouTube video with play button by default. Thus, there is no heavy loading and no additional HTTP request. It makes the page faster. YouTube video player is loaded when user clicks on play button only.

Comparison:

Here is comparison of regular and optimized YouTube embed.

YouTube Optimized Embed Code Generator

You can see the page size difference 559KB to 89KB.

If you want to compare yourself, I have created two pages used in the video

Default YouTube Embed
Optimized YouTube Embed

Open Firebug or web developer tools in browser (Press F12), use Ctrl + F5 to refresh the page and see the total size differences.

Conclusion:

We have seen how to embed YouTube videos in more efficient way. It makes faster page load and mobile friendly due to responsive in nature. Feel free to share your thoughts/issues in the comments.

14 comments

    1. Did you use locale file in the browser? Because this script worked for me when I put it on my server host.

  1. Simple & amazing. Exactly what I was looking for one of the sites.
    Really appreciate it & I’m grateful for saving my day quickly.
    Best wishes for your endeavors
    Thanks a ton.

  2. This is amazing, thank you so much! There seems to be a small issue on mobile devices. After clicking the play button, the youtube video loads but does not automatically play. The user has to click on the youtube play button. This requires the user to click 2 times to make the video play. Is there a workaround for this? Much appreciated!

  3. you made my day!! My page was too slow and now this will increase speed. Thanks!
    BTW: if anyone is using PrestaShop or Thirty bees CMS, the script creates an error when introducing it in the body (no idea why) but you can solve the problem just using the header instead!! (route: theme/yourtheme/header.tpl)

  4. Thanks for the awesome tool @TechBrij. I have a question for you please.

    We wanted to display the video as a html pop up. Pop up window opens when a user clicked on a page link, and the YouTube video is embedded in the pop up. Problem is once the pop up is closed video start to play from the beginning in background. Visitor can hear the audio, but no video.

    Do you have a fix for this?

    This technique helped to increase our website speed by over 2 seconds by the way!

Leave a Reply

Your email address will not be published. Required fields are marked *