Embedding Several YouTube Videos Slows Pageload? Here is the solution

You want to build that page with a lot of YouTube videos, but when you publish it, you realize it takes SOOOO LONG, sometimes 10 seconds(!) for a page to load! Well, this makes your site dead, because no one will stay on it more than a couple of moments, biting his nails while waiting for the hacking clips to be loaded.

And, with Webflow Video Widget there is nothing you can do… It’s a problem with YouTube itself and a heavy elements which are loaded with every video clip instance on your page.

Fortunately, we got a solution!
First of all, use HTML Embed method for your YouTube videos, instead of regular Webflow video element.

You also need to implement JavaScript to your site.

Go to this site, where you"ll find a step-by-step explanation of a problem and a solution.

You also need a generator:
=>> YouTube Optimized Embed Code Generator

It works just perfect.

Look at this example of 8 videos on one page (it can be much more, of course) =>>http://sulammusic.webflow.io/

If you have any questions - you’re welcome to write!

3 Likes

As a side point, if you are looking to place a ton of YouTube Videos on a page, here is a Webflow CMS powered YouTube playlist player created using a little custom css and javascript from a CodePen that might come in handy: https://webflow.com/website/YouTube-LazyLoad-from-CMS

https://webflow.com/website/YouTube-LazyLoad-from-CMS

This example above is loading 29 video ids from CMS and generating the player dynamically for each collection item.

4 Likes

Thank you, @cyberdave!

This lazy load is super! Thanks for sharing. Love loosing the bloat.

I just tried the embed code from Tech Brij.

When doing so, the page with the embedded code shows as ‘Not Secure’ next to the URL:

Screenshot 2020-06-01 at 10.07.38

Why would that be? @Ilan_Golan @cyberdave

Check “Enable SSL” first
image

Thanks @Ilan_Golan SSL is definitely on:

Screenshot 2020-06-01 at 10.47.37

I only lose ‘Secure’ from the pages I add the embed code to

@cyberdave, what do you think?

As I see, the code resource is secured as well…

I’m trying this at the moment - Lazy load embedded YouTube videos | CSS-Tricks - CSS-Tricks

I have a page with 8 videos and the load times are awful as expected.

Only issue with above is the Autoplay isn’t working on the page I’ve embedded on.

I did try @cyberdave solution above, but then I got ‘Defer parting of Javascript’ issues with page speed tests

EDIT: I got the lazy load embed working - Took my GT Metrix score from an ‘E’ to a ‘C’ which is a start.

I had the same problem, the code make my website unsecure. I tried other way but no options give me the same result speed.

Hi @Ilan_Golan,
very useful tool indeed, thank you for sharing!
It’s true that you need to double tap on the video to make it viewable. I would like the video to self-load while the user is scrolling so that when they arrive at the video, the video is ready to be watched in one-click - while of course keeping the benefits of an overall faster page-load :slight_smile:

I saw there are multiple parameters in the js code that your tool generated: maybe it’s just one or two parameters I need to change?

Thanks a LOT :slight_smile:

Here’s the preview-link: https://preview.webflow.com/preview/lovetabby?utm_medium=preview_link&utm_source=dashboard&utm_content=lovetabby&preview=3ca4b3a3e0854fd24425e754e94c12a7&mode=preview

Hi Guys,

This solution is exactly what I need. I’ve implemented a similar one previously but it doesn’t work with the CMS so I’m trying to make the switch to this one.

I’ve followed all of the steps, but for some reason I’m just getting playback errors every single time. If I clone the project and add my video ID in, it works fine. But when I move it over to my project it’s having none of it.

Here’s my project link…

https://preview.webflow.com/preview/ancoaching?utm_medium=preview_link&utm_source=designer&utm_content=ancoaching&preview=96a9e367d19b5386bb5c2a52074b932a&pageId=5f09a04e5dca80ac7d5d5271&itemId=5f09a112d5a0ca1843c53bb8&mode=preview

Thanks,
Lewis

For anyone in the future experiencing the same problem. Here is the scalable solution for lazyloading YouTube videos. It will also work for CMS as well.
Embed multiple Youtube videos with automatic lazyload