If the Studio preview warns that an image or video is blocked, or a clip appears as a blank box, the media file itself may be perfectly fine. In many cases, your browser simply isn't permitted to load it.
Finding the cause
The quickest way to determine what's happening is to open the media URL directly.
Copy the image or video URL and paste it into a private or incognito browser tab.
If the file does not load
If the URL returns an error such as 404 (Not Found) or 403 (Forbidden), the file is either missing or not publicly accessible.
Check that:
The URL is correct.
The file still exists.
The file can be accessed without logging in.
The URL does not require a private token or session.
Your hosting provider allows the file to be accessed publicly.
For example, if you're hosting the file on Amazon S3, make sure the object is publicly readable, such as with a public-read ACL where appropriate.
This will also cause your render to fail, so the file's accessibility needs to be fixed before rendering.
If the file loads, but Studio still blocks it
If the file opens normally in an incognito tab but remains blocked in Studio, the most likely cause is CORS.
Your render is probably fine.
The preview runs in your browser, so it follows cross-origin (CORS) rules. The rendering API fetches files server to server, where CORS does not apply. If CORS is the only problem, your video still renders correctly.
Fixing a CORS error
Add a CORS policy wherever the file is hosted.
On Amazon S3, go to Permissions > Cross-origin resource sharing (CORS) and add:
[
{
"AllowedOrigins": ["https://*.shotstack.io"],
"AllowedMethods": ["GET", "HEAD"],
"AllowedHeaders": ["*"],
"MaxAgeSeconds": 3000
}
]
If you have embedded the Studio SDK in your own app, allow your own domain instead. The SDK runs inside your app, so your site is the origin the browser reports, not ours.
Host your files with Shotstack
If you don't want to configure CORS yourself, you can host your media with Shotstack.
Use the Ingest API to upload your image or video to Shotstack's hosting. The API will return a URL that you can then use in your edit.
This avoids CORS issues because the media is hosted within Shotstack's infrastructure.
Still need help?
Using Google Drive?
Google Drive links can behave differently from normal direct media URLs. If you're using Google Drive to host your media, see Using Google Drive links inside a video.
Still stuck?
Contact our support team and send us the media URL you're using. We'll take a look and help identify what's preventing Studio from loading it.