Video Hotspots
Add interactive hotspots to any video with time-based markers, keyframe motion, and full accessibility. Zero dependencies, under 20 KB gzipped.
Hotspot Motion
Four interpolation modes let hotspots stay still, glide in a line, or follow any curved path you define.
The hotspot stays at a fixed position for its entire lifetime. No keyframes needed — just set x and y and let the pulsing dot draw attention.
Two keyframes connected by straight-line interpolation. The hotspot moves smoothly from left to right at constant speed.
Three keyframes with Catmull-Rom spline interpolation create a smooth V-shaped arc. The hotspot follows a natural curved trajectory.
Four or more keyframes trace an S-curve through the scene. Catmull-Rom interpolation ensures the motion feels fluid and organic.
Works with any player
One API, every video format. Native HTML5, adaptive streaming, and embedded players — all with full hotspot support.
HTML5 Video
MP4, WebM — native browser playback with zero overhead.
YouTube
Embed any YouTube video and layer interactive hotspots on top.
Vimeo
Professional Vimeo embeds with full hotspot integration.
HLS Streaming
Adaptive bitrate via hls.js — ideal for live and long-form content.
Up and running in under a minute
Install from npm or load from CDN — choose the method that fits your workflow.
npm install js-cloudimage-video-hotspotimport CIVideoHotspot from 'js-cloudimage-video-hotspot';
const player = new CIVideoHotspot('#my-video', {
src: 'https://example.com/room.mp4',
hotspots: [
{
id: 'sofa',
x: '40%', y: '60%',
startTime: 2, endTime: 10,
label: 'Modern Sofa',
data: { title: 'Sofa', price: '$899' }
}
]
});<script src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-video-hotspot/1.1.2/js-cloudimage-video-hotspot.min.js?vh=59d28e&func=proxy"></script>
<div
data-ci-video-hotspot-src="/room.mp4"
data-ci-video-hotspot-items='[{"id":"sofa","x":"40%","y":"60%","startTime":2,"endTime":10,"label":"Sofa"}]'
></div>
<script>CIVideoHotspot.autoInit();</script>Interactive Configurator
Toggle options and see the generated code update in real time.