Re-enable self-hosted video stories

[domlander]

What does this change?

Add an enableCors prop so that stories do not have to use CORS for video requests.

Why?

Stories containing self-hosted video do not work with crossOrigin set to anonymous. The reason for this is the same as why self-hosted videos do not work when developing locally. It's needed to be able to work with a side-car VTT file.

It is difficult to continue development without being able to use video stories and without the safety net of Chromatic.
Being unable to check stories when developing self-hosted video has led and may lead to introducing bugs.

What are the alternatives

• Only enable CORS on video requests if in a development environment and there are no subtitles. However, Chromatic is not affected and having a different experience in local and production could lead to bugs.
• Use a local video. Even if excluded from the production bundle, this means that the video would need to be downloaded whenever the repo is cloned.
• Use a video publicly available that does not require CORS. This would be a flimsy test if the Guardian does not control the video. To my knowledge, we do not have a video hosted somewhere that fulfils these requirements.
• Modify the server so that requests from local storybook and Chromatic are permitted. This runs into the same problems that we are having with requesting video when working locally.

Screenshots

https://www.chromatic.com/component?appId=63e251470cfbe61776b0ef19&csfId=components-selfhostedvideo&buildNumber=13841&k=693007b20507c3a940c66af4-1300px-interactive-true&h=2&b=-1

[github-actions]

Deploy build 22858 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 22858 of dotcom:rendering-all to CODE
• Deploy parts of build 22858 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

[github-actions]

Deploy build 47117 of Mobile::mobile-apps-rendering to CODE

All deployment options

• Deploy build 47117 of Mobile::mobile-apps-rendering to CODE
• Deploy parts of build 47117 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[Fweddi]

How does setting to crossOrigin to anonymous when there are subtitles, work, when it fails if they aren't subtitles?

[Fweddi]

How does setting to crossOrigin to anonymous when there are subtitles work, but it fails if there aren't subtitles?

[domlander]

Setting crossOrigin to anonymous is required for subtitles to work because the request for the video will only allow access to a sidecar vtt file if the video request uses CORS headers. CORS headers are not required if there is not a subtitles file.

We experienced issues when we added crossOrigin="anonymous" because some users had the original video request cached before this change (not using CORS headers), then this cached request failed after this change. Therefore I think it's better if always make video requests with CORS headers on production, and only locally omit CORS if it isn't required.