yt2press

A tool to convert YouTube videos into press-ready markdown documents with timestamped screenshots.

How to Use

Step 1: Prepare Your Video

Download or place a video file in the /docs/public directory. Several options are available for downloading YouTube videos:

YouTube Downloader Options

yt-dlp - Command-line tool with extensive format/quality options
Media Downloader - Desktop application with modern UI

Choose any method to download your video and save it to /docs/public directory.

Step 2: Create a Markdown File

Create a markdown file in /docs directory. The filename should match the video filename with [xxx] removed and spaces replaced with underscores.

For example:

Video file: my video [abc123].mp4 → Markdown file: my_video.md
Video file: presentation.webm → Markdown file: presentation.md
Video file: my-video [xyz].mpeg → Markdown file: my-video.md

The markdown file content can be:

Option A: YAML Frontmatter (for auto-generating timestamps)

---
interval: 5
dedup: true
---

<!-- Markdown content here can be left empty -->

interval: Interval in seconds to auto-generate timestamps
dedup: (Optional) Set to true to remove similar screenshots (defaults to 0.005), or specify a custom threshold value

Option B: Manual Timestamps

<!-- Frontmatter is optional -->
<!-- Content with timestamps... -->

1:30
Mi habitasse hendrerit id tincidunt finibus eleifend dolor aliquet erat egestas.

2:45
Semper pretium donec laoreet convallis accumsan habitasse.

5:00
Velit euismod blandit proin arcu magna.

Timestamps should be in M:SS or MM:SS format on their own line. They will be converted to timestamped screenshot references.

Step 3: Start the Development Server

Run the following command in the project directory:

pnpm run dev

This starts the VitePress development server and WebSocket server for communication.

Step 4: Use the Downloader Interface

Open the VitePress website in your browser
Enter your video filename in the textbox (e.g. my video [abc123].mp4, presentation.webm, my-video [xyz].mpeg)
Press Enter or click Submit

The app will:

Load the video
Extract screenshots at specified timestamps
Replace timestamp lines with embedded screenshot images
Save the updated markdown file

Project Structure

docs/                          # VitePress documentation root
  .vitepress/
    theme/
      components/
        Downloader.vue        # Vue component for the downloader interface
        Video.vue             # Vue component to display videos and linked timestamps
  public/                      # Video storage directory
  *.md                         # Markdown files with content
  [video-filename]/             # Screenshot folders (auto-generated)
    *.png                      # Timestamped screenshots
server.js                       # WebSocket server for handling downloads
group-similar.js               # Script for deduplicating similar screenshots

Dependencies

Node.js and pnpm
VitePress for web UI
WebSocket for real-time communication between browser and server
gray-matter for parsing YAML frontmatter
Sharp for image processing (screenshot manipulation)

3.4 KiB Raw Blame History