Videos are the most easiest way to explain anything to your viewers. But do you know when you embed a YouTube video on your page then it load bunch of extra CSS, JavaScripts, and images too.
It not sure that everyone who visit your page will see video and if he is not going to view video then he has paid his bandwidth for nothing. An average YouTube video load 500 KB of data on your page.
Solution :- Load YouTube Videos on Demand
A simple solution is that you can load YouTube videos on demand so that if user want to view video then video will be loaded otherwise not. Google+ has done this on its page. When you navigate to videos tab on any Google+ page then you will see a image with player icon on it, if you want to view video then click on that icon and video will be loaded for you.
As you can see in above video a thumbnail is shown with a player icon over it, once you click on it you video will be loaded.
What We had done?
We had just changed the method of adding video to our page, instead of using traditional IFRAME method we had gone a step ahead and used some Javascript and styling
Traditional method:-
<iframe width=”560” height=”315” src=”http://www.youtube.com/embed/OPTnR6ajMwe” frameborder=”0” allowfullscreen></iframe>
New Medthod :-
<div class=”youtube” id=”OPTnR6ajMwe” style=”width: 320px; height: 180px;”></div>
<script src=”https://technoarea-youtube.googlecode.com/files/technoarea-youtube.js”></script>
That’s it, now you had saved lots of memory and your page will load much fast as compare with earlier.
