Draggable Youtube Captions

Interactive YouTube caption overlay with draggable captions.

UPDATE

GOOD NEWS!! Captions dragging is now a built-in feature on Youtube. This project will now be archived for references in the future

Objective

As of 9 Feb 2021 the position of captions on Youtube videos are fixed and can't be moved around. This project solves that.

Overview

This implementation is a browser-based prototype that overlays captions on top of a YouTube player in real time. The app loads caption XML for a selected video, synchronizes each caption line to the current playback time, and renders captions inside a movable caption panel.

This project is intentionally lightweight and framework-free, focused on clear JavaScript logic and API integration.

Tech Stack

• HTML5
• CSS3
• JavaScript (vanilla)
• jQuery (AJAX)
• YouTube IFrame Player API
• Google timedtext caption endpoint

How It Works

1. The app initializes a YouTube player.
2. caption XML is requested for the current video ID.
3. caption nodes are parsed into a list of timed text items.
4. While the video is playing, a timer checks current playback time.
5. The matching caption line is rendered in the overlay.

Running the Project

1. In the project folder, start a local static server:

   python3 -m http.server

2. Open the app at:

   http://localhost:8000
   

3. Wait for the embedded player to load.

4. Click the search button and paste a YouTube URL.

5. Captions appear when caption data is available.

Notes:

• Use localhost (not file://) to avoid YouTube player identity issues.
• If you see Error 153, disable privacy/ad-block extensions for this page and retry.
• Stop the local server with Ctrl+C when done.

Limitations

• Works only for videos that expose caption tracks for the requested language.