How to reduce youtube player weight in Webflow?

In this tutorial, Sandro, cofounder of the Webflow SEO agency Gemeos, shows you how to reduce the weight of the YouTube video player to improve your website’s performance.

Why reduce the weight of the YouTube player?

1. Faster load times: A lighter video player lets videos load faster, which improves the user experience by reducing wait times.
2. Bandwidth usage: Lighter video players use less bandwidth, which is helpful for users with limited or expensive internet connections.
3. SEO optimization: Websites with faster load times tend to rank better in search engine results, which can help improve online visibility (SEO).
4. Cross-platform compatibility: Lighter video players are often better supported across a wider range of devices and browsers, which ensures a consistent experience for all users.

Example: 4 videos embedded via iframe will load 2.8 MB of data on the first load. With this code, you can cut that down to 170 KB

How does it work?

1. Add this script to the <head> of your page

2. Add an embed where you want your video to appear

This can be inside a div, a container, or even a section. The video will take the width of its parent element

Just make sure to replace the video ID with your own video ID ✌🏼

3. All that’s left is to publish and test the result