Hydrogen - CSP - Video files cannot be loaded

[nhm1990]

Hi folks,

When loading meta objects for a video (webm or mp4), my Hydrogen app is having problems.

“Content-Security-Policy: The page's settings blocked the loading of a resource (media-src) at gid://shopify/Video/....”

Please see attached my current config. For a 3D-Model file, I could make it running by coping the full url string to the cdn... but for the videos it's not working.

Any idea how I can handle this?

const { nonce, header, NonceProvider } = createContentSecurityPolicy({
fontSrc: ['https://fonts.gstatic.com', 'data:'],
styleSrc: ['fonts.googleapis.com', ...localDirectives],
connectSrc: [
//"'self'",
'https://monorail-edge.shopifysvc.com',
'http://localhost:*',
'ws://localhost:*',
'ws://127.0.0.1:*',
'ws://*.tryhydrogen.dev:*',
'https://cdn.shopify.com',
'blob:',
'https://cdn.shopify.com*',
'https://cdn.shopify.com/videos/c/o/v/12345.webm',
],
mediaSrc: [
"'self'",
'https://cdn.shopify.com',
'https://cdn.shopify.com/videos/c/o/v/12345.webm',
],

[nhm1990]

OK I pulled the ID instead of the URL from the CDN.
Nevertheless. unfortunately shopify is not providing webP files. They converting them to mp4....

metaobjects(first: 50, type: "hero_banner") {
nodes {
headerText: field(key: "header_text") {
value
}
image: field(key: "image") {
reference {
... on MediaImage {
image {
url
altText
height
width
}
}
}
}
videoMp4: field(key: "video_mp_4") {
reference {
... on Video {
alt
sources {
url
mimeType
format
}
}
}
}