Improve Prose support for privacy-enhanced Youtube embeds (#1097)

Author: rezrah

.changeset/small-cycles-build.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Add support for privacy-enhanced Youtube embeds in the `Prose` component. Now supports the `youtube-nocookie.com` hostname.

packages/react/src/Prose/Prose.module.css

@@ -320,7 +320,8 @@
 
 .Prose video,
 .Prose iframe[src*='youtube.com'],
-.Prose iframe[src*='youtu.be'] {
+.Prose iframe[src*='youtu.be'],
+.Prose iframe[src*='youtube-nocookie.com'] {
   --spacing: var(--brand-Prose-img-spacing);
 
   border-radius: var(--brand-borderRadius-medium);
@@ -336,7 +337,8 @@
 }
 
 .Prose iframe[src*='youtube.com'],
-.Prose iframe[src*='youtu.be'] {
+.Prose iframe[src*='youtu.be'],
+.Prose iframe[src*='youtube-nocookie.com'] {
   width: 100%;
   aspect-ratio: 16 / 9;
 }

packages/react/src/Prose/Prose.stories.tsx

@@ -67,7 +67,7 @@ const ExampleHtmlMarkup = `
     <h6>Youtube video embed</h6>
      <p>Pellentesque non ornare ligula. Suspendisse nibh purus, pretium id tortor sit amet, tincidunt gravida augue.</p>
     <p>Nunc velit odio, posuere eu felis eget, consectetur fermentum nisi. Aenean tempor odio id ornare ultrices. Quisque blandit condimentum tellus, semper efficitur sapien dapibus nec. </p>
-    <iframe width="560" height="315" src="https://www.youtube.com/embed/pBy1zgt0XPc?si=oPJ2zmFp6efpN15N" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+    <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/pBy1zgt0XPc?si=oPJ2zmFp6efpN15N" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
      <p>Pellentesque non ornare ligula. Suspendisse nibh purus, pretium id tortor sit amet, tincidunt gravida augue.</p>
     <p>Nunc velit odio, posuere eu felis eget, consectetur fermentum nisi. Aenean tempor odio id ornare ultrices. Quisque blandit condimentum tellus, semper efficitur sapien dapibus nec. </p>
     <h6>Native video</h6>