Lazy Load YouTube & Vimeo Videos In Clickfunnels

In this article, you’ll learn how to add lazy loading to the YouTube or Vimeo videos that you add to your funnels 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 to the YouTube or Vimeo videos in your funnels!

The easiest and fastest way would be to use CF Power Scripts. CF Power Scripts is the #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 Power Script will let you set everything up in as little as a few minutes without dealing with custom code. Moreover, this Power Script is available for free, which means there are no additional costs for you.

Don’t want to deal with the setup? Let us do the work for you! Check out our Done-For-You service and let us take care of the technical details so you can focus on your business.

Step 1: Prepare the video in Clickfunnels

1. Log into your Clickfunnels account and go to the funnel where you want to enable the lazy loading for the videos. Open the funnel step that has videos in the page editor.
2. Add an image element in the page area where your video should be. It'll be used as a placeholder while the video is being loaded.
3. Choose a placeholder image 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 understand that they can click on the image and watch the video.
4. Open the settings of the image by clicking on it and go to the CSS Info section by clicking on the hashtag icon at the bottom.
5. ​Change the title to cfps-lazy-yt-YOUTUBE VIDEO ID if you use a YouTube video on your page and cfps-lazy-vm-VIMEO VIDEO ID if you use a Vimeo video and click Update.
6. Save the changes you made on the page.

Step 2: Add the CF Lazy Video Power Script

1. Log in to your CF Power Scripts account and head to the Power Scripts tab.
2. Select the funnel and the funnel step where you want to add the Power Script. If you’re running a split test, you’ll see both page variations listed, and you’ll need to apply the Power Script to both pages.
3. Click Add New and select the CF Lazy Video Power Script from the list. It'll open a page with the settings of the CF Lazy Video Power Script.

4. Click Add Script.

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.

If you’ve found this content helpful and would like to support the blog, consider subscribing by clicking here. Your support is greatly appreciated!