Cloudfront CDN is not working with Videos

It sounds like you're encountering an issue with your CloudFront distribution when trying to access video content. This problem likely stems from how your CloudFront distribution and origin (S3 bucket) are configured to handle different types of content. Here are some steps you can take to address this issue:

1. Origin Configuration: Ensure that your CloudFront distribution is correctly configured to access your S3 bucket as the origin. The origin domain name should be set to your S3 bucket's endpoint (e.g., bucket-name.s3.region.amazonaws.com).

2. Cache Behavior: Review your CloudFront distribution's cache behavior settings. You may need to create separate cache behaviors for different content types (images vs. videos). This allows you to set different settings for each type of content.

3. Origin Access Identity (OAI) or Origin Access Control (OAC): If you're using OAI or OAC to restrict access to your S3 bucket, make sure the bucket policy is correctly configured to allow CloudFront to access both image and video objects.

4. Content-Type Headers: Ensure that your video files in S3 have the correct Content-Type metadata set (e.g., video/mp4 for MP4 files). This helps CloudFront handle the content appropriately.

5. Allowed HTTP Methods: In your CloudFront distribution settings, make sure that the appropriate HTTP methods (GET, HEAD) are allowed for video content.

6. Lambda@Edge: If you're using Lambda@Edge for image resizing, you'll need to modify your function to handle video content differently or create a separate function for video processing.

7. Viewer Protocol Policy: Check that your viewer protocol policy in CloudFront is set appropriately for video content (e.g., Redirect HTTP to HTTPS).

8. Error Pages: Configure custom error responses in CloudFront to handle any specific errors you might encounter with video content.

By addressing these points, you should be able to configure your CloudFront distribution to properly handle both image and video content from your S3 bucket. If you continue to experience issues, you may need to review CloudFront logs for more detailed error information and potentially contact AWS support for further assistance.
Sources
CloudFront: The resource you requested does not exist Origins S3 | AWS re:Post
Access Denied for Cloudfront to s3 (2025) | AWS re:Post
How can I get Cloudfront to access an image stored in a different S3 bucket | AWS re:Post

The issue you're experiencing is because Thumbor is primarily designed to handle image processing, not video content. When you try to access videos, Thumbor attempts to process them as images, resulting in errors.

To address this issue with CloudFront and Thumbor for handling both images and videos, you'll need to configure your setup to differentiate between image and video content. Here's how you can approach this:

1. Use different URL patterns: You can set up different URL patterns for images and videos. For example: Images: https://your-cdn.cloudfront.net/images/your-image.jpg Videos: https://your-cdn.cloudfront.net/videos/your-video.mp4

2. Configure CloudFront behaviors: Create separate behaviors in your CloudFront distribution for images and videos: For the /images/* path pattern, set up Thumbor as the origin For the /videos/* path pattern, set up your S3 bucket as the origin directly

3. Use Lambda@Edge: Implement a Lambda@Edge function to route requests based on file type: For image requests, forward to Thumbor For video requests, forward directly to S3

4. Modify Thumbor configuration: If you're using a custom Thumbor setup, you can modify it to handle video files differently: For image files, process as usual For video files, pass through without processing

5. Use query string parameters: Implement a system where you use query string parameters to indicate the resource type: ?type=image for images ?type=video for videos

Here's a basic example of how you might implement option 3 using Lambda@Edge:

exports.handler = async (event) => {
    const request = event.Records[0].cf.request;
    const uri = request.uri;
    
    if (uri.includes('/images/')) {
        // Route to Thumbor
        request.origin = {
            custom: {
                domainName: 'your-thumbor-domain.com',
                port: 443,
                protocol: 'https',
                path: '',
                sslProtocols: ['TLSv1.2'],
                readTimeout: 5,
                keepaliveTimeout: 5,
                customHeaders: {}
            }
        };
    } else if (uri.includes('/videos/')) {
        // Route directly to S3
        request.origin = {
            s3: {
                domainName: 'your-bucket.s3.amazonaws.com',
                region: 'your-region',
                authMethod: 'origin-access-identity',
                path: ''
            }
        };
    }
    
    return request;
};

This Lambda function would be associated with the CloudFront distribution's origin request event.