Video Demo for Projects

The projects showcase supports both image and video. You can store the image and video in the public directory.

For video, a better choice is to use a bucket storage service like Cloudflare R2 or AWS S3 .

Here is an example of using Cloudflare R2 for video storage.

Cloudflare R2 Setup

Go to your Cloudflare Dashboard → R2 Object Storage → Create Bucket (e.g., media).
Open the bucket → Settings → Public access → enable public reads.
Under Custom Domains → Add Custom Domain, enter files.yourname.com. Cloudflare will automatically create a DNS CNAME record for you.

You’ll get an S3-compatible endpoint like https://<ACCOUNT_ID>.r2.cloudflarestorage.com.

Configure AWS CLI for R2

Install AWS CLI if you haven’t done so.


brew install awscli

Then configure the AWS CLI with your R2 credentials.


aws configure --profile r2
# Fill in:
# AWS Access Key ID: <Your R2 Access Key ID>
# AWS Secret Access Key: <Your R2 Secret>
# Default region name: auto
# Default output format: json
 
# Use path-style URLs to avoid host-style issues
aws configure set s3.addressing_style path --profile r2

Upload videos with correct metadata & caching

Upload a single file


ws s3api put-object \
  --bucket media \
  --key videos/trailer.mp4 \
  --body ./trailer.mp4 \
  --content-type "video/mp4" \
  --cache-control "public, max-age=31536000, immutable" \
  --endpoint-url https://<ACCOUNT_ID>.r2.cloudflarestorage.com \
  --profile r2

The Cache-Control header tells browsers and Cloudflare Edge to cache the file for one year.

Public URL: https://files.yourname.com/videos/trailer.mp4