get iframes working

due to our cross origin headers we need to add the credentialless attribute to our iframes. Sadly it's experimental and they only work in Chrome so far.

Author: dummdidumm

apps/svelte.dev/README.md

@@ -17,7 +17,7 @@ Cross-Origin-Opener-Policy: same-origin
 
 Because we're doing soft navigation between pages, these headers need to be set for all responses, not just the ones from `/tutorial`.
 
-The result of setting these headers is that the site can no longer embed URLs from other sites (like images from another domain) without those domains either having a `cross-origin-resource-policy: cross-origin` header (which most don't) or us adding the `crossorigin="anonymous"` attribute to the elements that load those URLs.
+The result of setting these headers is that the site can no longer embed URLs from other sites (like images from another domain) without those domains either having a `cross-origin-resource-policy: cross-origin` header (which most don't) or us adding the `crossorigin="anonymous"` attribute (or the experimental-only-working-in-chrome `credentialless` for iframes) to the elements that load those URLs.
 
 When writing content for the tutorial, you need to be aware of the differences of loading content:
 

apps/svelte.dev/content/blog/2023-09-20-runes.md

@@ -31,7 +31,7 @@ Svelte 5 changes all that with _runes_, which unlock _universal, fine-grained re
 <div class="max">
 <figure style="max-width: 960px; margin: 0 auto">
 <div style="aspect-ratio: 1.755; position: relative; margin: 0 auto;">
-	<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/RVnxF3j3N8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+	<iframe credentialless style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/RVnxF3j3N8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 <figcaption>Introducing runes</figcaption>

apps/svelte.dev/content/blog/2024-04-30-svelte-5-release-candidate.md

@@ -30,7 +30,7 @@ You can learn more about the new features from the [preview documentation](https
 <div class="max">
 <figure style="max-width: 960px; margin: 0 auto">
 <div style="aspect-ratio: 1.755; position: relative; margin: 0 auto;">
-	<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/xCeYmdukOKI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+	<iframe credentialless style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/xCeYmdukOKI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 <figcaption>What You Can Do For Your Framework</figcaption>