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 https://www.labnol.org/internet/light-youtube-embeds/27941/

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

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