Branding & domains

Play Amazon S3 Videos in a Virtual Tour: CORS Settings

Some TeliportMe features play a video straight from your own storage, such as an Amazon S3 bucket, and need your bucket to allow it. That permission is called CORS. Without it, the video just doesn’t appear, with no error.

Updated 2 min read

Branding & domains
  1. White-Label Virtual Tours: How Branding Works
  2. Create a Brand Kit for Your Virtual Tours
  3. Add Your Logo to a Virtual Tour and Link It to Your Website
  4. Set Up a Custom Domain for Your Virtual Tours (CNAME)
  5. Where Are TeliportMe Virtual Tours Hosted?
  6. Play Amazon S3 Videos in a Virtual Tour: CORS Settings

Which features need it

  • Needs CORSTour Virtual Host, Virtual Host hotspots, and any video, image or audio hotspot viewed on the VR page.
  • Doesn’tMagic Embed, video hotspot pop-ups and the welcome screen video.

The simplest way round it: upload the video to TeliportMe instead of pasting a link. In the video picker, choose Upload and pick an .mp4 file. There’s a size limit per plan; the picker tells you if a file is too big.

Set up your S3 bucket

In the AWS console, open your bucket’s Permissions tab.

  1. Under Bucket policy, allow anyone to read the files. Replace BUCKETNAME with your bucket’s name:
    {
      "Version": "2012-10-17",
      "Statement": [
        {
          "Sid": "PublicReadGetObject",
          "Effect": "Allow",
          "Principal": "*",
          "Action": "s3:GetObject",
          "Resource": "arn:aws:s3:::BUCKETNAME/*"
        }
      ]
    }
  2. Under Cross-origin resource sharing (CORS), add this rule:
    [
      {
        "AllowedHeaders": [],
        "AllowedMethods": ["GET"],
        "AllowedOrigins": ["*"],
        "ExposeHeaders": []
      }
    ]
  3. Save both, then paste the video’s object URL into the feature’s video field.

Tips

  • Only make public what you’re happy to share. The bucket policy lets anyone with a file’s link open it, so keep these videos in their own bucket.
  • Want to allow only your tours? Instead of "*", list "https://teliportme.com" and your custom domain, if you have one. Tours embedded on your website still work, because the embed runs on teliportme.com or your custom domain, not on your site.
  • Use a direct link to the .mp4 file. YouTube links don’t work for these features.
  • Other storage, such as Azure Blob Storage or Google Cloud Storage, has the same kind of CORS setting.

Common questions

Why won’t my Amazon S3 video play in my virtual tour?

The S3 bucket most likely needs CORS. Tour Virtual Host, Virtual Host and the VR page only show a linked video if the bucket allows it; without CORS, the video doesn’t appear and there’s no error.

Do I need CORS if I upload the video to TeliportMe?

No. A video uploaded to TeliportMe as an .mp4 works without any CORS settings. There’s a size limit per plan.

No. Tour Virtual Host, Virtual Host and Magic Embed need a direct link to an .mp4 file, or an uploaded video. For a YouTube video, use a video hotspot.

Start your free trial

Build one tour with every feature, free forever. No credit card. Subscribe when you’re ready to publish.