In my project if I embed a video it shows up locally. However, it won’t appear if I switch to a new browser or an incognito window. This behaviour continues in production when I deploy the app to Vercel: nothing appears. About 24 hours later I started seeing the video in Brave (my default browser) but if I switch to incognito or a different browser no videos…
In all instances, the iFrame is showing up but the sometimes the frame content is blank.
For example locally, on a working embed this is the HTML:
But if I go to an incognito window:
So I check the network tabs to see what YouTube is sending back…
These are the working response headers:
accept-ch: Sec-CH-UA-Arch, Sec-CH-UA-Bitness, Sec-CH-UA-Full-Version, Sec-CH-UA-Full-Version-List, Sec-CH-UA-Model, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"
cache-control: no-cache, no-store, max-age=0, must-revalidate
content-encoding: br
content-type: text/html; charset=utf-8
cross-origin-opener-policy-report-only: same-origin; report-to="youtube_main"
date: Tue, 30 Aug 2022 14:54:43 GMT
expires: Mon, 01 Jan 1990 00:00:00 GMT
permissions-policy: ch-ua-arch=*, ch-ua-bitness=*, ch-ua-full-version=*, ch-ua-full-version-list=*, ch-ua-model=*, ch-ua-platform=*, ch-ua-platform-version=*
pragma: no-cache
report-to: {"group":"youtube_main","max_age":2592000,"endpoints":[{"url":"https://csp.withgoogle.com/csp/report-to/youtube_main"}]}
server: ESF
strict-transport-security: max-age=31536000
vary: Sec-CH-UA-Arch, Sec-CH-UA-Bitness, Sec-CH-UA-Full-Version, Sec-CH-UA-Full-Version-List, Sec-CH-UA-Model, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version
x-content-type-options: nosniff
x-xss-protection: 0
These are the broken response headers:
accept-ch: Sec-CH-UA-Arch, Sec-CH-UA-Bitness, Sec-CH-UA-Full-Version, Sec-CH-UA-Full-Version-List, Sec-CH-UA-Model, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"
cache-control: no-cache, no-store, max-age=0, must-revalidate
content-encoding: br
content-type: text/html; charset=utf-8
cross-origin-opener-policy-report-only: same-origin; report-to="youtube_main"
date: Tue, 30 Aug 2022 15:06:06 GMT
expires: Mon, 01 Jan 1990 00:00:00 GMT
p3p: CP="This is not a P3P policy! See http://support.google.com/accounts/answer/151657?hl=en for more info."
permissions-policy: ch-ua-arch=*, ch-ua-bitness=*, ch-ua-full-version=*, ch-ua-full-version-list=*, ch-ua-model=*, ch-ua-platform=*, ch-ua-platform-version=*
pragma: no-cache
report-to: {"group":"youtube_main","max_age":2592000,"endpoints":[{"url":"https://csp.withgoogle.com/csp/report-to/youtube_main"}]}
server: ESF
set-cookie: YSC=Krb4950G7JY; Domain=.youtube.com; Path=/; Secure; HttpOnly; SameSite=none
set-cookie: VISITOR_INFO1_LIVE=xki8lgkzSJ4; Domain=.youtube.com; Expires=Sun, 26-Feb-2023 15:06:06 GMT; Path=/; Secure; HttpOnly; SameSite=none
strict-transport-security: max-age=31536000
vary: Sec-CH-UA-Arch, Sec-CH-UA-Bitness, Sec-CH-UA-Full-Version, Sec-CH-UA-Full-Version-List, Sec-CH-UA-Model, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version
x-content-type-options: nosniff
x-xss-protection: 0
To me the response headers from YouTube seem identical, the actual response (still in the network tab) is the main difference. The working response is a full page of HTML, which I would expect, the broken response says “Failed to load response data: No resource with given identifier found”.
Any thoughts on this would be super appreciated.
Context: the site is built with Svelte and Sveltekit, deployed to Vercel. I’ve tried a straight copypasta embed from YouTube, and specifically using the sveltekit-embed package, the results of both are the same as described above.
