YouTube and Viemo embeds...

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.

Just out of curiosity, if you create a blank page without any frameworks with this embed and upload it to Vercel directly, does it work properly? :slight_smile:

Sorry mid-move things have been crazy… I suspect it might, I think the issue is that the Sveltekit setup is SSR, I don’t know all the technicalities of that and how it may impact a YouTube iFrame but I installed a lazy-loading library to load the videos when they scrolled into frame and that seemed to work…

	import lazyload from 'vanilla-lazyload';
    lazyloadInstance = new lazyload();
     
     <iframe
		class="lazy player-ratio"
		src=""
		data-src="https://player.vimeo.com/video/embed-link..."
	 />
1 Like