The embedded video not only increases the byte size of your web pages but the browser has to make multiple HTTP requests to render the video player. This increases the overall loading time of your page thus affecting the page speed score
. The other drawback with the default YouTube embed code is that it isn’tresponsive
. If people view your website on a mobile phone, the video player may not resize properly for the small screen.
Embed YouTube Videos without Increasing Page Size
Google+ uses a clever technique for embedding YouTube videos – it just embeds the thumbnail image of a YouTube video and the actual video player is loaded only when the user manually clicks the thumbnail.
YouTube thumbnail images are about 15 kB in size so we are able to reduce the byte size of web pages by 500+ kb. That’s huge!
Light and Responsive YouTube Embeds
The standard embed code for YouTube uses the IFRAME tag and the width and height of the video player are hard-coded thus making the player non-responsive.
The new on-demand embed code for YouTube is slightly different. You need not specify the player size as we are now embedding the video responsively. Also, the IFRAME is replaced with a DIV tag and the IFRAME is added to the page only when the visitor clicks the play button.
Embed YouTube Videos Responsively – Tutorial
Copy-paste the following snippet anywhere in your web page where you would like the YouTube video to appear. Remember to replace VIDEO_ID with the actual ID of the YouTube video.
We will not assign height and width since the video player will automatically occupy the width of the parent while the height is auto-calculated. You can paste multiple DIV blocks with different video IDs if you need to embed multiple videos on the same page.
Finally, paste the CSS before the closing head tag of your web template.