Lazy Load YouTube Videos on page - not working on mobile

Design help Custom code
1

Hi there,

I’m working with a client to improve their site speed. The biggest culprit right now is the YouTube embed code.

I implemented Lazy Load for the YouTube videos using the method documented at Lite YouTube Embeds - A Better Method for Embedding YouTube Videos on your Website - Digital Inspiration

The issue is, this code isn’t responsive, therefore it doesn’t work on mobile devices.

Any hints or ideas? This change alone saves 1mb and about 3-4 seconds loading the client’s homepage.

Here’s the preview link.

2

I’m going to try the Codepen solution mentioned by @cyberdave at Embedding Several YouTube Videos Slows Pageload? Here is the solution - #2 by cyberdave

I’ll let you know how it goes.

2 Likes
3

The codepen solution works, but doesn’t consistently load the thumbnail. If this is as close as we can get, I’d say the 1mb and 3-4 second savings is worth it.

1 Like