Embed YouTube Videos on your Page Without Slowing Down Performance
YouTube embeds are notorious for dragging down your site speed. But What IF you could embed videos without compromising performance?
HTML
Copy Code
<div style="height: 0px; overflow: hidden; padding-top: 56.25%; position: relative; width: 100%;">
<iframe
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"
src="https://tube.rvere.com/embed?{Your Video ID Here}"
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen>
</iframe>
</div>The Problem with Default YouTube Embeds
Every time you embed a YouTube video the normal way, you're inviting a bunch of bloated scripts and iframes to load on your page - even if the user never presses play.
That’s a recipe for slow load times, jumpy interactions, and a bummer of a user experience. Not great.
But don’t worry, we’ve got a lightweight fix. With this solution, those bits of code, don't load until the user pushes play!
The Workaround
Here’s how to get performance-friendly YouTube embeds on your site:
- Grab your YouTube link
- Paste it into this tool: Tube Embed Generator
- Hit “Generate Code” OR grab the code above and swap in your video ID (v=1234)
- Drop that code into a Webflow Embed block
- Done 🎉
Your video will now load only when someone actually clicks it. A big win for performance.
Want to use it with Webflow CMS?
- Add a new field to your Collection called 'YouTube Video Link ID'
- Paste in just the video ID (everything from
v=and after, in your URL) - In your embed code, replace the static video ID with the dynamic CMS variable
Now every item in your CMS can have its own slick, fast-loading video.
