The Problem: Long Distance Movie Nights
My partner and I were in a long-distance relationship. We'd try to watch movies "together"—pressing play at the same time over a phone call. It never worked. One person would laugh at a joke 3 seconds before the other. The experience was broken.
There had to be a better way than "3... 2... 1... play!"
The Solution: Twilio Sync
Twilio had just launched Sync—a real-time state synchronization service. Instead of building WebSocket infrastructure, I could use Sync to keep video state in perfect alignment across browsers.
The architecture was elegant:
- Each user installs a Chrome extension on YouTube
- Extension joins a Sync document (essentially a shared JSON object)
- When User A pauses, the pause event is written to Sync
- Sync broadcasts to all connected clients
- User B's video pauses at the exact same timestamp
Chrome Extension Architecture
The extension uses content scripts to inject into YouTube pages:
// content.js - injected into YouTube pages
const video = document.querySelector('video');
// Listen for local video events
video.addEventListener('play', () => {
syncDocument.update({
action: 'play',
timestamp: video.currentTime,
time: Date.now()
});
});
video.addEventListener('pause', () => {
syncDocument.update({
action: 'pause',
timestamp: video.currentTime
});
});
// Listen for remote events
syncDocument.on('updated', (data) => {
if (data.action === 'play') {
const latency = Date.now() - data.time;
video.currentTime = data.timestamp + (latency / 1000);
video.play();
} else if (data.action === 'pause') {
video.pause();
video.currentTime = data.timestamp;
}
});
Handling Latency
The tricky part: network latency. When User A presses play, it takes time for that message to reach User B. By the time User B receives it, User A's video has advanced.
The solution: timestamp every action and adjust on receipt. If User A sends a play at T=0 with timestamp 30.5s, and User B receives it 100ms later, User B jumps to 30.6s before playing.
The Result
syncvid.io was born. Friends could create rooms, share links, and watch together. The sync was tight—usually within 50ms. Good enough that you could laugh at jokes simultaneously.