Embedding a Youtube video is very easy. You open the video on YouTube, click Share and then Embed. And then you include this code on your blog or website.
Although embedding a YouTube video this way is simple, you'd be shocked to know how much a single YouTube video embed can bring down the performance of your web pages. According to labnol.org, the browser must download approximately 800 kB of data just to render the YouTube video player. Even before the visitor clicks the play button, these files are downloaded.
LazyLoading YouTube Video Embed Technique has many benefits in terms of significantly improving website speed and performance. It is very important to know how to implement it and embed Youtube videos on your website the right way.
How to implement lazy loading on your blog or website?
There are quite a lot of plugins on the internet that does this task. You can use any plugin. But remember plugins are sometimes stuffed with unnecessary code which may take away the performance benefit.
Whether you are a website owner or blogger you would definitely require this type of embedding if you wish to increase your website or blog speed.
Here is Step by step method on how to lazyload Embed youtube player on your blog or website with a very lite pure JavaScript and CSS code.
Step 1: Find the video you want to embed and copy its URL from address bar or by clicking share then click on Copy link.
Step 2: Go to Blogging Tools Website and click the YouTube Lazy Loader card.
Step 3: You need to perform this step only once when you embed video for the first time on your website.
Click on the CSS and JS Code
Copy the CSS and paste it in the Theme of your Content Management System (CMS) as instructed in below screenshot.
Step 4: Paste the YouTube Video URL you copied in Step 1 in the first text box. Click on 'Get Embed Code' button and then on 'Copy Embed Code' button.
How does LazyLoad Youtube Video Embed works?
DEMO
