CODEWITHSUNDEEP
javascripthtmlperformanceyoutubereverse-engineering
Loïc V
Loïc V

Reputation: 635

Performance drop when embedding youtube videos + reverse engineering a site that does it right

When embedding youtube videos in a HTML + vanilla JS page we get a huge performance drop as all the videos are preloaded. (videoplayback?expire=..... requests)

I discovered that vodafone's job landing page have two videos, and they lazy load them. I really love the result:

You can check it here: https://careers.vodafone.com/

I saw a lot of ways to lazy load with css, plugins... but I saw nowhere a solution as clean as the one from vodafone.

No sign at all of the videos on page load: vodafone's jobs page

Anyone understands how they did it? It's a plugin?

Upvotes: 0

Views: 513

Answers (1)

Mario Welzig
Mario Welzig

Reputation: 618

As far as I can tell, Vodafone doesn't do anything special here, just a regular iframe pointing to the embed page.

<iframe src="//www.youtube.com/embed/9cC0CZiVpsA?rel=0&amp;autoplay=0" allowfullscreen="true"></iframe>

The first request to YouTube happens before the DOMContentLoaded event (blue bar in the image) and way before the page is fully loaded (red bar). The preview images are loaded between the two bars.

First request to YouTube Preview image loaded

Requests to videoplayback however should only start once you click on one of the videos. Could it be that you added ;autoplay=1 to the video url or an autoplay attribute to the iframe?

Upvotes: 1

Related Questions