Embedding Youtube Videos Without Affecting Page Load Speed

When we embed Youtube videos into some webpage using standard IFRAME tags it affects page load time very much. An additional 400 kb of data (CSS, Javascript, Images) is downloaded while loading the page for rendering the video player.

 

This ~400 kb or 0.4 mb is downloaded regardless of whether the user has chosen to watch the video or not. It also forces the browser to make multiple HTTP requests which in turn affect the overall page speed score.

Check Out : By-Pass Youtube Age Restriction

To get around this problem we are going to copy the system Google+ uses to embed youtube videos. In place of directly embedding the video player it displays a thumbnail and a play icon which when click upon will play the video.

For example, take a look at this :-

Code To Embed Videos Without Affecting Page Load Speed :-

For embedding a youtube video using standard IFRAME is something like this :

---

<iframe width=”320″ height=”180″ 
     src=”http://www.youtube.com/embed/AhQIFeLLuyU“>

</iframe>

---

For embedding a youtube video using the efficient method :

---

<div class=”youtube” id=”AhQIFeLLuyU” style=”width: 320px; height: 180px;”></div>
<script src=”https://googledrive.com/host/0B9iMnS6Zneq8WFBuS0cxeHU0ZTg”></script>

 

---

You’ve to change the value of ‘height’, ‘width’ and ‘id’ in the above code to your’s video. After doing this little change you will see a huge difference in your page load time.

**You can also copy the javascript file to your own server if you have a high traffic website to reduce load time.

Enjoy..!!