Streaming live at 10am (PST)

Embedding Several YouTube Videos Slows Pageload? Here is the solution


#1

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:
=>> https://techbrij.com/tools/youtube-video-embed-code-generator.php

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!


#2

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

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


Lazy Load YouTube Videos on page - not working on mobile
#3

Thank you, @cyberdave!


#4

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