How to Embed YouTube Videos Without Effecting Blog Load Time

0

Embedding videos on your blog posts will increase the value for your post and user will stay on your website for a long time which indirectly reduces your blog bounce rate.

There are various advantages if embedding YouTube videos on your articles. The user will able to understand the post more clearly.

So apart from various advantages we get from embedding YouTube videos, we also have a drawback of embedding YouTube videos.

When you embed a YouTube video code (Iframe) on your blog post then that will directly increase your page size (upto 0.5 MB) and increase your blog load time.

So it overall effects the user experience (UX) and visitor may leave your website and may visit your competitor site.

The YouTube video which you embed will not be responsive.

So here I will explain how to embed YouTube videos efficiently and make it responsive.

How to Embed Youtube Videos

Load YouTube Video on Demand

The only thing we can do is to load the YouTube whenever needed (On-Demand).

So how to do this?

It is very simple, instead of embedding the entire video player which increase the blog load time we need to just use Google plus which cleverly replaces the video player with the video thumbnail and a play icon which is placed on the video thumbnail.

By doing this you can load the YouTube video player only when you click on play icon.

This ultimately reduces the size of the page on your blog and the page loads faster.

The following is the traditional code to embed a YouTube video using iFrame.

Embed YouTube Videos Responsively without Increasing Load Time

The following is the example of the video which will load only when you click on play icon

I already told you that the video is loaded and played automatically only after the user clicks on the play icon placed on the thumbnail.

What happens when the user clicks the lay icon is it will replace the thumbnail with the video which is having attribute autoplay=”1” which makes the video to play on loading the video.

All the attributes and video player related files are not loaded until the play icon is clicked by the user.

So here I’m going to explain you how to embed YouTube videos which load on demand and make them responsive

Add the above code anywhere where you like to embed the video and replace the VIDEOID with your required video id.

Now add the follow css to your website.

For wordpress,just remove paste the css snippet in the style.css file and save.

Note : For wordpress blogs you need to remove :not(.post-body) as it is added inorder to remove some css overriding issues on blogger or you can place the code as it is.

If you are on blogger just find the following tag using ctrl+f

]]></b:skin>

and paste the above code above this tag.

Now copy the following javascript code and paste in your template above </head> tag or above </body> tag. If you are using blogger you need to convert this code using any HTML converter and paste above </body> tag.

Finally save your template

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

LEAVE A REPLY

Please enter your comment!
Please enter your name here