The Official VideoCC Walkthrough

Welcome to VideoCC. This guide explains every feature on the site in detail and in plain language so that the annotation workflow is predictable and efficient. Humor appears only where it helps — the rest is focused, practical, and descriptive.

Part 1: The Front Page - Your Starting Point

When the site is opened, the front page has one clear purpose: load a YouTube video and move into the workspace for annotation.

1.1. Loading a Video

The Input Field: Paste a YouTube URL into the main text box. The field accepts standard YouTube links (video pages, short links, etc.).
The "Load Video" Button: Click this button after pasting a link. The site validates the URL and, when valid, transitions directly into the main workspace.

Pro-Tip: Press Enter after pasting the URL instead of clicking the button — the page accepts Enter as a shortcut to load the video.

1.2. Discovering Features

Feature Cards: Animated cards beneath the input field highlight core features (Resizable Panels, Global Autofill, Dual-Mode Captioning, etc.). Hovering over a card pauses animation so text can be read without distraction.

1.3. Site Navigation

Floating Navigation: Buttons appear on the left and right edges. Hovering expands them into ribbons that lead to pages such as Blogs & Walkthroughs, Privacy Policy, and Contact / Feedback. These controls remain accessible without leaving the front page.

Part 2: The Main Workspace - Where the Magic Happens

After a video loads, the workspace divides into two main columns: Player (left) and Annotation Panel (right). Each column focuses on related tasks and avoids overlap.

2.1. The Left Column (Player & Controls)

YouTube Player: The loaded video is embedded here with standard YouTube controls (play/pause, volume, quality settings, captions if provided by the source).
Speed Controls: Buttons above the player set playback to 0.5x, 1x, 1.5x, or 2x. Use slower speeds for precise timing, faster speeds for scanning.
Seek Controls: Quick-jump buttons let the user jump 1s, 5s, or 30s backward/forward.
Timestamp Viewer: A large, live display under the player shows the current playback time. This shown time is the default time recorded when creating a new entry.
Hover-Based Hotkeys: Hovering the mouse over the player area activates keyboard shortcuts so they do not interfere with typing elsewhere.
- Spacebar: Play / Pause.
- ArrowLeft / ArrowRight: Seek backward / forward (default seeks by 5 seconds).
Selectable Seek Interval: Clicking any seek button (for example, +30s) highlights it. Once highlighted, arrow keys will use that interval until the button is clicked again to deselect it. This allows quick, consistent seeking using the keyboard.

2.2. The Right Column (The Annotation Panel)

This column is for creating, editing, and organizing entries (bookmarks or subtitles).

Mode Switching (Bookmark vs. Subtitle):
- Click the "Bookmark ▼" header to open the mode dropdown.
- Bookmark Mode (default): Use for single timestamp entries — ideal for YouTube chapters or simple notes.
- Subtitle Mode: Each entry includes a start time and an end time and is intended for captions/subtitles.
Anatomy of an Entry:
1. Counter — A sequential number (1., 2., 3.) for quick reference.
2. Play Button (▶) — Jumps the player to the entry's timestamp; in Subtitle mode it plays the segment from start to end.
3. Timestamp Field(s) — Click to edit manually. The app accepts time formats like 1:25 or 1:10:05.
4. Description Field — The main text area for notes or caption text. The field automatically resizes vertically.
5. Delete Button (X) — Removes the entry permanently (unless undone).
Adding an Entry:
- Click the Button: Press the large "Add a bookmark" / "Add a subtitle" button.
- Use the Hotkey: Press the Insert key. This pauses the video and creates a new entry.
Setting Start & End Times (Subtitle Mode):
- First, select the subtitle entry by clicking anywhere inside it. A selected entry displays a continuous white glow.
- With the entry selected, use the "Start" and "End" buttons to capture the current playback time.
- Important: To keep an entry selected, the mouse must remain over the annotation panel. Moving the mouse away will automatically deselect the entry after 5 seconds.
Auto-Scroll & Highlighting: As playback progresses, the app highlights the active entry that corresponds to the current time and scrolls it into view.

2.3. Advanced Annotation Features

Scoped Undo / Redo: The workspace has dedicated Undo and Redo buttons that operate on the list of entries. For text-level undos within a description field, use the browser's native Ctrl+Z / Cmd+Z.
Smart Autofill: Local Autofill (default) suggests phrases from notes in the current video. Enable Global Autofill for suggestions from all videos ever edited in the browser.

Part 3: Exporting Your Work

The Output Section at the bottom converts work into formats ready for use on YouTube or other platforms.

Click "Generate" — The app converts entries into properly formatted output (YouTube chapters text or .srt subtitle content).
Copy to Clipboard — Use the Copy button to copy the generated text.
Save As — Choose .txt or .srt from the dropdown to download the file locally.

Part 4: General Site Features

Resizable Panels: Hover the vertical divider between player and annotation panel, click and drag to resize.
Starting Over: Click the VideoCC logo in the top-left to return to the front page.
Auto-Saving: Annotations are saved automatically to the browser's local storage for each video ID.
Feedback Form: Use the floating Feedback & Contact Us button to send messages.

Part 5: Device Recommendations

Desktop or Tablet: Recommended. Larger screens make it easier to manage two columns and to use keyboard shortcuts.
Phone: Supported for basic captioning, but the workflow is slower. Use only when necessary.

Quick Workflow — Step-by-Step (efficient method)

Load the YouTube URL (paste + Enter).
Use the player to find the first point of interest.
Press Insert to add bookmarks quickly while scanning. Bookmarks are great for chapter points.
Switch to Subtitle Mode for detailed captioning. Click an entry, then use Start/End to set precise times; edit description text.
Use Local or Global Autofill to speed typing and keep phrasing consistent.
When satisfied, click Generate, then Copy or Save As .srt / .txt.

Keyboard Shortcuts & Controls (summary)

Enter — Load video after pasting URL.
Insert — Add a bookmark or subtitle at the current timestamp (video auto-pauses).
Spacebar — Play / Pause (active when hovering over the player).
ArrowLeft / ArrowRight — Seek backward / forward. Default 5s; interval changes if a seek button is highlighted.
Ctrl+Z / Cmd+Z — Undo typing inside a description field.
Undo / Redo buttons in the UI — Undo or redo entry-level changes (add/delete).

Best Practices & Tips

Use bookmarks to map the structure of long videos first.
When captioning, keep individual subtitle durations reasonable (short phrases).
Toggle Global Autofill only when the suggestions are relevant.
Export intermittently. Auto-save protects work, but exported files are the safest backups.
For precise editing, slow playback to 0.5x when capturing start/end times for short segments.

Troubleshooting (short)

Video won’t load: Confirm the URL is a valid YouTube video link; try hitting Enter; check network connectivity.
Hotkeys not working: Hover over the player area to activate them. Some browser extensions may interfere.
Saved notes not visible: Ensure the same video is loaded. Clearing browser storage will remove saved notes.
Export problems: Confirm every subtitle has both start and end times. Regenerate the output.

Final Notes

This guide aims to make each feature and workflow step clear so that annotation feels deliberate and repeatable. Use the Feedback button to report missing small annoyances or to request workflow enhancements — practical suggestions lead to practical improvements.

← Back to All Posts