How to reduce the weight of the Youtube video player to increase the performance of your website?

Tools:

Why reduce the weight of the YouTube player?

  1. Faster load time: A lighter video player allows videos to load faster, improving the user experience by reducing wait times.
  2. Bandwidth consumption: Lighter video players consume less bandwidth, which is beneficial for users with limited or expensive Internet connections.
  3. SEO optimization: Websites with faster load times tend to rank higher in search engine results, which can help improve online visibility.
  4. Cross-platform compatibility: Lighter video players are often better supported across a wider range of devices and browsers, ensuring a consistent experience for all users.

Example: 4 videos inserted via iframe will load 2.8MB of data on the first load, using this code you can reduce it to 170KB

How does it work?

1. Add this script <head>to your page

 <script src="https://unpkg.com/youtube-light-player">
</script>

2. Embed where you want to show your video

It can be in a div, a container or even a section. The video takes the width of its parent element

 <youtube-light-player src="https://www.youtube.com/watch?v=Ht_n-n2TDc0">
</youtube-light-player>

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

Author photo
Sandro D.
Updated on
30/5/2024
Growth Marketer, Webflow expert and a jack of all trades. I take care of commercial operations, ensure the smooth running of projects and take care of issues related to marketing (SEO, Tracking, Copywriting, etc.)
Are you stuck with your current site?
Let's talk ?
Welcome
>
Gemeos Academy
>
How to reduce the weight of the Youtube video player to increase the performance of your website?
These tutorials might interest you

Our tutorials in the same category

See all our tutorials
Illustration traits
We use the best tools

Your site is developed using the best tools and best practices

Gemeos doesn't just offer you a website, but expertise in the best tools to guarantee you the best possible return on your investment.

Figma

To design your custom website and optimize its conversion rate

Webflow

For pixel-perfect, optimized integration of your website

Client-first

Organizing your project to perfection

Wized

To add advanced features to your project

Make

Automate your workflows and save maximum time