mirror-vimeo-ripper

🎥 Vimeo Ripper (vget)

A sleek, web-based Vimeo video downloader that extracts direct download links for Vimeo videos in multiple quality formats. Built with vanilla JavaScript and powered by Netlify Lambda functions.

✨ Features

• 🎯 Simple Interface: Clean, intuitive web interface for easy video URL input
• 📱 Responsive Design: Works seamlessly across desktop and mobile devices
• 🎬 Multiple Quality Options: Download videos in 360p, 540p, 720p, or 1080p
• 🖼️ Poster Extraction: Get video thumbnail/poster images alongside video files
• ⚡ Real-time Validation: Instant URL validation with visual feedback
• 🚀 Serverless Backend: Fast, scalable processing using Netlify Lambda functions
• 🔗 Direct Download Links: No intermediary downloads - direct access to video files

🛠️ Tech Stack

• Frontend: HTML5, CSS3, Vanilla JavaScript
• Backend: Node.js, Netlify Lambda Functions
• HTTP Client: Axios
• Deployment: Netlify
• APIs: Vimeo Player Config API

📋 Prerequisites

Before running this project, make sure you have:

• Node.js (version 12 or higher)
• npm (comes with Node.js)
• A modern web browser
• Internet connection (for Vimeo API access)

🚀 Installation

1. Clone the Repository

git clone https://github.com/6a/vimeo-ripper.git
cd vimeo-ripper

2. Install Dependencies

npm install

This will install the required packages:

• axios - HTTP client for API requests
• netlify-lambda - Local development and build tools for Lambda functions
• node-fetch - Node.js implementation of the Fetch API

💻 Development Setup

Local Development

Option 1: Full Local Setup (Recommended)

1. Start the Lambda Function Server:

   npm run start:lambda
   

   This starts the Netlify Lambda development server at http://localhost:9000

2. Serve the Frontend: In a new terminal window:

   # Using Python (if available)
   python3 -m http.server 8080
   
   # OR using Node.js http-server
   npx http-server -p 8080
   
   # OR using any other static file server
   

3. Update API Endpoint: Modify code.js line 23 to use your local lambda function:

   const url = `http://localhost:9000/.netlify/functions/get?id=${currentID}&q=${qualitySelect.value}`;
   

4. Access the Application: Open your browser and navigate to http://localhost:8080

Option 2: Quick Preview (Frontend Only)

Simply open index.html in your web browser. Note that this will use the deployed Lambda function and may not work if the deployment is unavailable.

Production Build

To prepare the Lambda functions for deployment:

npm run build:lambda

This creates optimized Lambda function bundles in the lambda/ directory.

🎯 Usage

Basic Usage

1. Open the Application: Navigate to the web interface in your browser
2. Enter Vimeo URL: Paste a Vimeo video URL in the input field

Supported URL Formats:

   https://vimeo.com/123456789
   https://vimeo.com/channels/staffpicks/123456789
   https://vimeo.com/ondemand/moviename/123456789
   vimeo.com/123456789

1. Select Quality: Choose your preferred video quality from the dropdown:

   • 1080P (1920px width)
   • 720P (1280px width)
   • 540P (960px width)
   • 360P (640px width)

2. Process Video: Click the play button or press Enter

3. Download: Two links will appear:

   • (video link) - Click to view or right-click → "Save as" to download
   • (poster link) - Direct link to the video thumbnail

Example Workflow

Input: https://vimeo.com/channels/staffpicks/212731897
Quality: 720P
Output:
  ✅ (video link) - Direct MP4 download
  ✅ (poster link) - Thumbnail image

📁 Project Structure

vimeo-ripper/
├── 📄 index.html          # Main web interface
├── 🎨 style.css           # Application styling
├── ⚙️ code.js             # Frontend logic and API calls
├── 📦 package.json        # Dependencies and scripts
├── 🚀 netlify.toml        # Netlify deployment configuration
├── 🖼️ img/               # UI assets
│   └── play-button.svg
├── 🔧 src/
│   └── lambda/
│       └── get.js         # Serverless function for video processing
└── 🏗️ lambda/            # Built Lambda functions (generated)

Key Files Explained

• index.html: The main user interface with input validation and result display
• code.js: Handles URL validation, API calls, and user interactions
• style.css: Responsive design with gradient background and modern styling
• src/lambda/get.js: Serverless function that fetches video data from Vimeo's API
• netlify.toml: Configuration for Netlify deployment

🔧 API Documentation

Lambda Function Endpoint

URL: /.netlify/functions/get

Method: GET

Parameters:

• id (required): Vimeo video ID extracted from the URL
• q (optional): Requested video quality width (640, 960, 1280, 1920)

Response Format:

{
  "video": "https://direct-video-url.mp4",
  "poster": "https://thumbnail-image-url.jpg"
}

Error Response:

{
  "error": "The server encountered a problem when trying to get the video.",
  "details": "Error details here"
}

Frontend API Usage

The frontend uses the Fetch API to communicate with the Lambda function:

const url = `https://vget.netlify.com/.netlify/functions/get?id=${videoID}&q=${quality}`;
fetch(url)
  .then(response => response.json())
  .then(data => {
    // Handle video and poster URLs
  });

⚙️ Configuration

Environment Variables

For production deployment, you may want to configure:

• API_BASE_URL: Base URL for your deployed Lambda functions
• CORS_ORIGIN: Allowed origins for CORS (currently set to "*")

URL Validation Regex

The application uses a comprehensive regex pattern to validate Vimeo URLs:

const regex = new RegExp(`^((https?):\/)?\/?(vimeo.com)((\/\\w+)*\/)([0-9]+[^#?\s]+)(.*)?(#[\\w\\-]+)?$`);

This pattern supports various Vimeo URL formats including channels, on-demand content, and direct video links.

🚀 Deployment

Netlify Deployment (Recommended)

1. Connect Repository: Link your GitHub repository to Netlify

2. Configure Build Settings:

   • Build command: npm run build:lambda
   • Publish directory: ./ (root directory)
   • Functions directory: lambda

3. Deploy: Netlify will automatically build and deploy your application

Manual Deployment

1. Build Lambda Functions:

   npm run build:lambda
   

2. Upload Files: Upload all files including the generated lambda/ directory to your hosting provider

3. Configure Serverless Functions: Ensure your hosting provider supports serverless functions compatible with Netlify Lambda

🐛 Troubleshooting

Common Issues

1. "Failed" Links Appear

• Cause: Video may be private, embedded disabled, or region-restricted
• Solution: Try a different Vimeo video or check video privacy settings

2. Lambda Function Not Working Locally

• Cause: Netlify Lambda dev server not running
• Solution: Ensure npm run start:lambda is running and update API endpoint in code.js

3. CORS Errors

• Cause: Browser blocking cross-origin requests
• Solution: Serve the frontend through a proper HTTP server, not file:// protocol

4. Invalid URL Error

• Cause: URL doesn't match expected Vimeo format
• Solution: Ensure URL contains a valid Vimeo video ID (numbers only)

Debug Mode

To enable debugging, open browser developer tools and monitor:

• Network tab for API requests
• Console tab for JavaScript errors
• Application tab for any storage issues

🤝 Contributing

Contributions are welcome! Here's how to get started:

1. Fork the Repository
2. Create a Feature Branch: git checkout -b feature/amazing-feature
3. Make Changes: Implement your feature or fix
4. Test Thoroughly: Ensure all functionality works
5. Commit Changes: git commit -m 'Add amazing feature'
6. Push to Branch: git push origin feature/amazing-feature
7. Open Pull Request: Submit your changes for review

Development Guidelines

• Follow existing code style and conventions
• Test with multiple Vimeo video types
• Ensure responsive design compatibility
• Update documentation for new features

📄 License

This project is licensed under the ISC License. See the package.json file for details.

🙏 Acknowledgments

• Vimeo: For providing the player configuration API
• Netlify: For serverless function hosting and deployment platform
• Open Source Community: For the various libraries and tools used

📞 Support

If you encounter issues or have questions:

1. Check the Issues page
2. Create a new issue with detailed information
3. Include browser version, error messages, and steps to reproduce

---

⚠️ Disclaimer: This tool is for educational purposes. Please respect content creators' rights and Vimeo's Terms of Service. Only download videos you have permission to access.