Most video embeds destroy your page speed. A single YouTube iframe adds 500–700 KB of blocking JavaScript the moment your page loads — before anyone has even pressed play. LazyLoad Video loads nothing but a lightweight thumbnail until the viewer actually needs the video. The result is dramatically faster Time to Interactive, better Lighthouse scores, and a real-world loading experience that feels instant.
YouTube's default embed loads its entire player runtime on page paint, whether or not the user ever watches the video. Vimeo's iframe is lighter but still triggers third-party scripts immediately. LazyLoad Video replaces all of that with a static image and a single IntersectionObserver listener, one of the most efficient browser APIs available. The heavy player only loads when it enters the viewport or when the user clicks. On pages with multiple videos, the difference in total page weight can be several megabytes.
· YouTube — paste any link format: youtu.be, watch?v=, /shorts/, /live/, /embed/, or bare 11-character ID
· Vimeo — paste any Vimeo URL or numeric ID, thumbnail and title fetched automatically via oEmbed
· CDN / Direct URL — link to any hosted .mp4, .webm, or .mov file with full custom controls
· Upload — attach a video file directly from the Framer side panel, first frame extracted automatically as poster image
CDN and uploaded videos get a fully custom control bar that appears on hover and disappears after 2.5 seconds of inactivity. No native browser chrome, no branded player UI — just a clean frosted-glass bar that matches any design system.
· Scrubable progress bar with visual thumb and smooth fill animation
· Play / Pause with a centred glassy button shown when paused
· Mute toggle with distinct volume and mute icons
· Timecode display in tabular monospace so digits never jump layout
· Playback speed picker (0.5× · 0.75× · 1× · 1.25× · 1.5× · 2×) in a floating glassy dropdown
· Loop toggle with active/inactive visual state
· Fullscreen button using the native Fullscreen API
· Video title shown inline when Title on Hover is enabled
· IntersectionObserver with configurable eager margin pre-warms the load before the element is fully visible
· YouTube thumbnails served directly from i.ytimg.com CDN — no oEmbed request needed for the image
· Vimeo and title metadata fetched only once, aborted cleanly on unmount with AbortController
· Uploaded video poster extracted via canvas drawImage at frame 0.001s — zero extra network request
· Object URLs revoked on unmount to prevent memory leaks
· The real player is keyed to its src so React never re-mounts unnecessarily
Every setting lives in a collapsible group so your panel stays clean:
Loading — trigger mode (View or Click · On View · On Click), eager preload margin, aspect ratio (16:9 · 9:16 · 1:1 · 4:3), thumbnail quality
Thumbnail — toggle custom image override with an image picker
Video Options — controls, autoplay, mute, loop, captions, no-cookie mode
Appearance — corner radius, shadow, border width and color, overlay tint
Play Button — show/hide toggle, size, independent radius control, glassmorphism fill, blur, border, icon color and opacity
When load mode is set to On Click and the user activates the poster, the iframe is built with autoplay=1 so playback begins immediately on mount. No clicking the poster and then clicking play again inside the iframe.
YouTube embeds use youtube-nocookie.com by default, which prevents Google from setting cookies until the viewer interacts with the player. Toggle it off in Video Options if you need standard embeds.
LazyLoad Video is completely free. No licence required, no attribution needed.
For questions or feedback, reach out at zlatkomarjanovic.zm@gmail.com
