Whenever we embed YouTube video with standard IFRAME tag, our page load increases by around 400 kB for each embedded video thus increasing page load time significantly.
Today I will show you a different approach to embed YouTube videos to reduce page load time.In this approach initially we will load a thumbnail and will load video only when user clicks on this thumbnail.
For this purpose I will introduce you with a short Jquery code which will make embedding YouTube video very easy.
I hope that you have already included latest version of Jquery in your website.If not then please add it.
1. Add this css to your website's <head></head> section.
Comparison for page size and load time.
video embedded without above script.
video embedded with above script
See time and page load reduced by more then 50% !!!
For live demo and source code. Visit this link
Demo video and Tutorial for Blogger.
Today I will show you a different approach to embed YouTube videos to reduce page load time.In this approach initially we will load a thumbnail and will load video only when user clicks on this thumbnail.
For this purpose I will introduce you with a short Jquery code which will make embedding YouTube video very easy.
I hope that you have already included latest version of Jquery in your website.If not then please add it.
1. Add this css to your website's <head></head> section.
<link rel="stylesheet" href="https://sites.google.com/site/curiohub/youtube/youtube.css" type="text/css" />2. Add This JavaScript just before </body> tag.
<script src="https://sites.google.com/site/curiohub/youtube/youtube.js" ></script>Now to embed YouTube video create a <div> and provide class and vid [YouTube video id.] attributes. as follows,
it's done!<!-- if YouTube url is: https://www.youtube.com/watch?v=iG9CE55wbtY then vid="iG9CE55wbtY" --><div class="yvid" vid="iG9CE55wbtY"></div><!--Default video size 640x360--><!-- For defining custom dimensions for video, add dimensions to the div.--> <div class="yvid" vid="bsF_AaPXK-s" style="width:400px;height: 200px;"></div>
Comparison for page size and load time.
video embedded without above script.
video embedded with above script
See time and page load reduced by more then 50% !!!
For live demo and source code. Visit this link
Demo video and Tutorial for Blogger.
Did you find this post useful? Let Us know in the comments section below.
0 comments:
Post a Comment