Skip to content

CDN Setup for Media Delivery

Optimize media delivery for channels with large content libraries.


Overview

As your CastConductor channel grows with more videos, images, and audio files, you'll want to serve media through a Content Delivery Network (CDN) rather than directly from your web host. This provides:

  • Faster load times — Content served from edge locations near your viewers
  • Reduced server load — Offload bandwidth from your WordPress host
  • Better reliability — CDN redundancy prevents single points of failure
  • Lower costs — CDN bandwidth is typically cheaper than web host bandwidth

We recommend Cloudflare R2 for CastConductor media storage:

Feature Benefit
Zero egress fees No charge for bandwidth (huge savings for video)
S3-compatible Works with standard WordPress offload plugins
Global CDN included Automatic edge caching worldwide
Generous free tier 10 GB storage, 10 million requests/month free

Pricing Comparison

For a channel serving 1 TB/month of video content:

Provider Storage Bandwidth Total
Cloudflare R2 $0.015/GB $0 ~$15/month
AWS S3 + CloudFront $0.023/GB $0.085/GB ~$100+/month
DigitalOcean Spaces $5 flat $0.01/GB (overage) ~$15/month
Web host direct ~$0.10/GB ~$100/month

Cloudflare R2 Advantage

With zero egress fees, R2 is especially cost-effective for video-heavy channels. You only pay for storage, not delivery.


Setup Guide: Cloudflare R2

Prerequisites

  • A Cloudflare account (free tier is fine)
  • Your WordPress site
  • WP Offload Media plugin (Lite version is free)

Step 1: Create R2 Bucket

  1. Log in to Cloudflare Dashboard
  2. Navigate to R2 Object Storage in the sidebar
  3. Click Create bucket
  4. Name your bucket (e.g., my-channel-media)
  5. Select Automatic for location (nearest to your viewers)
  6. Click Create bucket

Step 2: Create API Token

  1. In Cloudflare Dashboard, go to R2 Object Storage
  2. Click Manage R2 API Tokens
  3. Click Create API token
  4. Configure:
  5. Token name: WP Offload Media
  6. Permissions: Object Read & Write
  7. Specify bucket: Select your media bucket
  8. Click Create API Token
  9. Copy and save the Access Key ID and Secret Access Key (shown only once!)

Step 3: Enable Public Access

  1. In your R2 bucket settings, go to Settings
  2. Under Public Access, click Allow Access
  3. You'll get a public URL like: https://pub-xxxxx.r2.dev

Or, for a custom domain:

  1. Click Connect Domain
  2. Enter a subdomain (e.g., cdn.yourchannel.com)
  3. Cloudflare will configure DNS automatically

Step 4: Configure WordPress

  1. Install and activate WP Offload Media Lite plugin
  2. Go to Settings → Offload Media
  3. Choose Cloudflare R2 as your provider
  4. Enter your credentials:
  5. Access Key ID: From Step 2
  6. Secret Access Key: From Step 2
  7. Bucket: Your bucket name
  8. Region: auto
  9. Configure options:
  10. Copy Files to Bucket — Upload new media to R2
  11. Serve from R2 — Rewrite URLs to CDN
  12. Optional: Remove Local Files — Save disk space on your host
  13. Save settings

Step 5: Migrate Existing Media

  1. In WP Offload Media, go to the Tools tab
  2. Click Offload Existing Media
  3. Wait for migration to complete

All your images, videos, and audio files are now served through Cloudflare's CDN!


Quick Setup: Cloudflare Proxy (No Storage)

If you're already using Cloudflare for your domain and just want caching (no separate storage), you can enable CDN with zero configuration:

How It Works

  1. Your media URLs (e.g., yoursite.com/wp-content/uploads/video.mp4) already pass through Cloudflare
  2. Cloudflare caches static files automatically
  3. Viewers get content from the nearest edge location

Optimize Caching

  1. Log in to Cloudflare Dashboard
  2. Go to Caching → Cache Rules
  3. Create a rule:
  4. If: URL path contains /wp-content/uploads/
  5. Then: Cache eligible content, set Edge TTL to 1 month
  6. Deploy the rule

Limitations

This approach caches content but doesn't offload storage. Your web host still stores all files. For large libraries, R2 is the better solution.


Alternative: AWS S3 + CloudFront

If you prefer AWS or already use their services:

Step 1: Create S3 Bucket

  1. Log in to AWS Console
  2. Go to S3 and click Create bucket
  3. Name your bucket and select a region
  4. Uncheck Block all public access (or configure CloudFront later)
  5. Create bucket

Step 2: Create IAM User

  1. Go to IAM → Users → Create user
  2. Attach policy: AmazonS3FullAccess
  3. Create access key and save credentials

Step 3: Create CloudFront Distribution

  1. Go to CloudFront → Create distribution
  2. Origin: Select your S3 bucket
  3. Configure caching behaviors
  4. Create distribution and note the CloudFront URL

Step 4: Configure WordPress

  1. Install WP Offload Media plugin
  2. Select Amazon S3 as provider
  3. Enter your IAM credentials
  4. Set CloudFront URL as the delivery URL

Alternative: DigitalOcean Spaces

A simpler, fixed-price option:

Feature Details
Storage $5/month for 250 GB
Bandwidth 1 TB included, $0.01/GB overage
CDN Built-in, 29 edge locations

Setup

  1. Create a Space in DigitalOcean
  2. Enable CDN in Space settings
  3. Generate API keys (Spaces access keys)
  4. Configure WP Offload Media with the S3-compatible endpoint

CastConductor CDN Integration (Future)

Coming Soon

We're planning native CDN configuration in CastConductor Settings. This will simplify setup by:

  • Built-in R2/S3 configuration fields
  • Automatic URL rewriting for Roku app
  • One-click media migration

For now, use WP Offload Media as described above.


Roku-Specific Considerations

Video Streaming

For HLS video streams (.m3u8), the CDN will cache both: - The manifest file (.m3u8) - The video segments (.ts files)

Ensure your CDN cache TTL allows for: - Manifest files: Short TTL (10-60 seconds) for live streams - Segments: Longer TTL (1 hour+) for VOD content

HTTPS Requirement

Roku requires HTTPS for all media URLs. Cloudflare R2 and all major CDNs provide HTTPS automatically.

CORS Headers

If your Roku app loads content from a different domain, ensure your CDN returns proper CORS headers:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, HEAD, OPTIONS

Cloudflare R2 handles this automatically for public buckets.


Monitoring & Analytics

Cloudflare Analytics

  1. Go to Cloudflare Dashboard → R2 → Your Bucket → Metrics
  2. View:
  3. Total requests
  4. Data transferred
  5. Cache hit ratio

WordPress Media Library

After configuring offload, your Media Library will show which files are stored remotely:

  • Cloud icon = Stored in R2/S3
  • Local icon = Still on web host

Cost Estimation

Use this formula to estimate monthly CDN costs:

Cloudflare R2:
  Storage: (Total GB) × $0.015
  Bandwidth: $0

AWS S3 + CloudFront:
  Storage: (Total GB) × $0.023
  Bandwidth: (TB delivered) × $85

DigitalOcean Spaces:
  Base: $5/month (250 GB storage, 1 TB bandwidth)
  Overage: $0.02/GB storage, $0.01/GB bandwidth

Example: 50 GB content, 500 GB/month delivery

Provider Monthly Cost
Cloudflare R2 $0.75
AWS S3 + CloudFront $43.65
DigitalOcean Spaces $5.00

Troubleshooting

Media Not Loading After Migration

  1. Check URLs: Ensure WordPress is rewriting to CDN URLs
  2. Clear cache: Flush WordPress and CDN caches
  3. Check permissions: Bucket must allow public read access

Roku App Shows Broken Images

  1. Verify HTTPS: All URLs must be HTTPS
  2. Check CORS: Ensure Access-Control-Allow-Origin: * header
  3. Check cache: Old URLs may be cached — regenerate app config

High Bandwidth Costs

  1. Enable caching: Increase cache TTL for static content
  2. Optimize video: Use appropriate bitrates (1080p only when needed)
  3. Use R2: Switch to Cloudflare R2 for zero egress fees

Next Steps