In this article, you’ll learn how you can add lazy loading of your YouTube or Vimeo videos in Clickfunnels.
Why do you need to use the lazy loading?
In a nutshell, it helps you improve the loading time of your funnel and therefore, the user experience of people who visit your funnel.
For example, if you have twenty different lessons with videos in the membership area, the moment a user logs into the membership area, twenty connections to YouTube are created to get the video information. This drastically slows down the performance of your funnel. Lazy loading in Clickfunnels prevents the creation of those unnecessary connections and improves the loading time.
The same applies to the videos on your sales pages or order forms. If you have a few of them, their loading can harm the performance of your funnel.
The lazy loading allows you to use the placeholder images and load the video only when people click on it.
Let’s see how you can apply it for the YouTube or Vimeo videos in your funnels!
The easiest and fastest way though would be to use CF Power Scripts. CF Power Scripts is a #1 add-on for Clickfunnels which lets you integrate additional features to your funnels that Clickfunnels doesn’t offer by default.
The CF Lazy Video script will let you set everything up in as little as a few minutes without dealing with custom code. Moreover, this script is available for FREE which means no additional costs for you.
Adding Lazy Loading To Clickfunnels
Step 1: Add CF Lazy Video Script
- Log in to your CF Power Scripts account and head to the Power Scripts tab.
- Select the funnel and the funnel step where you want to add the script.
- Click on the icon next to the page name and open the page in the page editor.
Note: if you’re running a split test, you’ll see both page variations listed and you’ll need to apply the script to both pages.
Step 2: Change Settings In Clickfunnels
- Click on the icon next to the page name and open the page in the Clickfunnels page editor.
- Add an image element in the page area where your video should be.
- Choose an image that you want to use as a placeholder from the library or upload the image to Clickfunnels. You may want to use a placeholder image with a play button on it so the visitors of your funnel realize that they can click on the image and watch the video.
- Open the settings of the image by clicking on it and go to the CSS Info by clicking on the hashtag icon at the bottom.
- Change the title to cfps-lazy-yt-YOUTUBE VIDEO ID for a YouTube video and cfps-lazy-vm-VIMEO VIDEO ID for a Vimeo video and click Update.
- Save the changes you’ve made on the page.
Step 3: Activate The Script In CF Power Scripts
The only thing that is left to do is to activate the CF Lazy Video script in CF Power Scripts.
- Go back to CF Power Scripts and click Add New.
- Choose the CF Lazy Video script from the list.
- Click Add Script.
That’s all you need to do to add the lazy loading of your videos in Clickfunnels!
If you want to bring your videos to the next level and make them look more professional have a look at our articles on how to hide the YouTube branding on your videos in Clickfunnels and how to add autoplay and overlays on Vimeo videos.
It’s only one of the scripts that CF Power Scripts offers to its users! Check out other scripts to integrate additional features to your funnels and make them even more powerful.
Lazy Loading Of The Videos In Clickfunnels F.A.Q.
What is the lazy loading in Clickfunnels?
The lazy loading allows you to use the placeholder images and load the video only when people click on it. It helps you improve the loading time of your funnel and therefore, the user experience of people who visit your funnel.
The best way to add lazy loading to your videos in Clickfunnels is to use CF Lazy Video script from CF Power Scripts.
How to add lazy loading of the videos in Clickfunnels?
The best and easiest way to add lazy loading to your videos in Clickfunnels is to use CF Lazy Video script from CF Power Scripts. It’ll let you set everything up in as little as a few minutes without dealing with custom code.