Fix common issues
CORS Server Configuration
Beginning in v1.19.0, some users may see an "Unable to load media" message in the editor.
This message displays in the editor when Web Stories cannot load images and videos in your Media Library. The most common cause for this issue is using a Content Delivery Network (CDN) or other service to host your site's assets. Without the correct HTTP headers set, the connection to CDN-hosted assets will be blocked due to Cross-Origin Resource Sharing (CORS).
Cross-Origin Resource Sharing is a mechanism that allows or disallows the loading of assets from one domain (e.g. Amazon S3) on another domain (e.g. your website).
Confirming the misconfiguration
When this message displays, images and videos typically will appear as an empty space in the editor because they cannot be accessed by the Web Stories plugin.
To further confirm that this issue is caused by CORS, open a story in the editor. In Chrome, right-click, and select Inspect, then the Console tab. A CORS error will look like this:
You will likely see multiple instances of this error in the console, one for each image/video.
As noted in the console error message, Web Stories cannot load assets in this case because it is "blocked by CORS policy".
To adjust the CORS policy and allow images/videos that are offloaded to display in the Web Stories editor, you need to add an
Access-Control-Allow-Origin header to your website. The method for setting up a CORS header will vary from host to host, so reach out to your web developer or hosting provider for help and send them this guide for context.
Some guides on adding
Access-Control-Allow-Origin headers from popular hosts are below:
Web Stories are powered by AMP, which adds some restrictions on a page’s allowed markup. For Web Stories to be eligible to appear on Google Search or Google Discover experiences, they need to adhere to various AMP specifications. This allows the story to be served via the AMP cache and ensures performance and the best experience for your users.
In some cases, other WordPress plugins can interfere with stories and insert disallowed markup, causing AMP validation issues. Some examples of common AMP validation issues in stories:
- Missing publisher logo
- Missing poster image
- Mandatory tag missing
html !doctype'is missing or incorrect
After you've developed the story, make sure the Web Story is valid AMP. A valid AMP story is one that adheres to various AMP specifications. You can use the following tools ensure that your Web Story is valid AMP:
Web Stories Google Test Tool
The Web Stories Test Tool allows you to check that the Web Story is valid. To validate your story, paste your story URL into the text box and select the Test URL button. Your story will be scanned by the tool and test results displayed soon after.
Results will return as valid or invalid. If your story is invalid, a list of validation errors will be displayed.
Invalid Web Story example:
Valid Web Story example:
Further useful resources