VIDEO PLAYER · FRAMER CODE COMPONENT
Portable video infrastructure for Framer client work.
A drop-in video player component for MP4 demos, adaptive HLS playback, live streams, and muted background-video treatments — configured directly from Framer controls.
MP4
HLS VOD
HLS LIVE
BACKGROUND
source: auto · ratio 16:9 · preload metadata
SOURCE MODES
One component, four production playback patterns.
Use the same player for case-study clips, adaptive streams, live event broadcasts, and ambient site backgrounds.
MODE 01
MP4 demos
Standard file playback for product tours, case-study clips, and controlled editorial video blocks.
MODE 02
HLS VOD
Adaptive streamed playback for longer assets that need efficient delivery across connection speeds.
MODE 03
HLS Live
Live stream support for launches, webinars, and event pages using the same Framer control surface.
MODE 04
Background video
Muted, looping, inline playback for ambient heroes and visual texture without custom rebuilds.
FRAMER CONTROLS
Editable where teams actually need it.
The component keeps player logic inside the code file while exposing practical canvas controls for source, behavior, layout, and presentation.
INPUT
Source URL
Switch MP4 or HLS source paths without editing code.
TYPE
auto / mp4 / hls
Choose source handling for standard, adaptive, or live streams.
BEHAVIOR
Autoplay stack
Controls, autoplay, mute, loop, inline, and preload options.
MEDIA
Poster image
A responsive poster slot for polished preview states.
LAYOUT
Aspect ratio
Use 16:9, 1:1, 9:16, or client-specific ratios.
FIT
Object fit
Contain, cover, or fill depending on the design treatment.
STYLE
Background color
Set the player shell behind letterboxed or loading states.
STYLE
Border radius
Match the surrounding card, hero, or editorial layout.
LOADER
Preset aware
Loads the correct Video.js v10 CDN preset only when a player instance needs it.
RUNTIME
Shared loading
Module loading is shared across instances, preventing duplicate network work.
UPDATES
Media props update
Normal playback props update in place as designers tune values on the canvas.
UNMOUNT
DOM cleanup
The media tree is torn down on unmount so project pages remain predictable.
COPY / INSTALL
Use it as a portable Framer component across client projects.
Copy the component link into Framer, drop it on the canvas, then configure source, source type, playback behavior, ratio, fit, background, and radius from properties.
Production QA checklist
✓ MP4 fallback source tested
✓ HLS VOD and live URLs verified
✓ Autoplay uses muted inline playback
✓ Poster, ratio, fit, and radius reviewed
✓ Unmount cleanup checked on page transitions