Skip to content

VERCEL-CLOUDINARY.md

Latest commit

 

History

History
52 lines (43 loc) · 1.3 KB

VERCEL-CLOUDINARY.md

File metadata and controls

52 lines (43 loc) · 1.3 KB
Raw

Vercel + Cloudinary Solution

Perfect Combination for Video Portfolios

✅ Vercel: Lightning-fast static hosting
✅ Cloudinary: Professional video hosting & optimization
✅ Free tiers available
✅ Automatic optimization
✅ Global CDN

Setup Process

1. Upload Videos to Cloudinary

  • Sign up for free Cloudinary account (25GB free)
  • Upload your high-quality videos
  • Get optimized URLs for different devices

2. Update Video URLs in Code

// Replace local video paths with Cloudinary URLs
const videoUrls = {
  'trading-1': 'https://res.cloudinary.com/yourcloud/video/upload/v1/trading-1.mp4',
  'trading-2': 'https://res.cloudinary.com/yourcloud/video/upload/v1/trading-2.mp4',
  // ... more videos
};

3. Deploy to Vercel

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel --prod

Benefits

  • 🎬 Automatic video optimization for different devices
  • 📱 Responsive video delivery (mobile gets smaller files)
  • ⚡ Edge caching worldwide
  • 🔧 On-the-fly transformations
  • 💰 Free tier: 25GB + 25GB bandwidth

Sample Implementation

<!-- Smart video delivery -->
<video controls>
  <source 
    src="https://res.cloudinary.com/yourcloud/video/upload/q_auto,f_auto/trading-1" 
    type="video/mp4">
</video>