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.
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.
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.
This is great! Been searching for this for a while now
Great , but I the video size is pretty weird cant adjust it
This tricks works awesome. I will use it to all of my client website to optimize youtube video
Does not work, requires 2 clicks on desktop & mobile. I have been searching for a solution for weeks.
Did you use locale file in the browser? Because this script worked for me when I put it on my server host.
Hi there, there is a way so at the end of the video it does not show my other videos in my channel?
Anyway when viewing with mobile device one click gets it to play rather than having to click play twice?
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.
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!
was there a fix for this?
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)
How can I see the video with autoplay?
***** TechBrij Rocks – 5 stars for your efforts.
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!