fix: add referer for youtube iframes

package.json

@@ -51,6 +51,7 @@
     "react": "^18.3.1",
     "react-calendly": "^4.3.1",
     "react-dom": "^18.3.1",
+    "react-error-overlay": "^6.1.0",
     "react-hook-form": "^7.56.4",
     "react-instantsearch-dom": "^6.40.4",
     "react-modal": "^3.16.3",

src/components/pages/blog-post/content/youtube-iframe/youtube-iframe.jsx

@@ -10,6 +10,7 @@ const YoutubeIframe = ({ embedId }) => (
       src={`https://www.youtube.com/embed/${embedId}`}
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
       title="Embedded YouTube"
+      referrerPolicy="strict-origin-when-cross-origin"
       allowFullScreen
     />
   </figure>

src/components/pages/get-involved/calendar-integration/calendar-integration.jsx

@@ -5,54 +5,53 @@ import Button from 'components/shared/button';
 import Container from 'components/shared/container';
 import Heading from 'components/shared/heading';
 
-const CalendarIntegration = () => {
-  return (
-    <section className="py-8 sm:py-10 calendar-integration md:py-16 lg:py-20">
-      <Container>
-        <div className="mb-8 text-center">
-          <Heading className="text-black dark:text-white" tag="h2">
-            Community Calendar
-          </Heading>
-          <p className="max-w-2xl mx-auto mt-5 text-lg text-black dark:text-gray-2">
-            Stay up to date with Cilium community meetings, events, and activities. Join us for
-            regular discussions and project updates.
-          </p>
-        </div>
+const CalendarIntegration = () => (
+  <section className="py-8 sm:py-10 calendar-integration md:py-16 lg:py-20">
+    <Container>
+      <div className="mb-8 text-center">
+        <Heading className="text-black dark:text-white" tag="h2">
+          Community Calendar
+        </Heading>
+        <p className="max-w-2xl mx-auto mt-5 text-lg text-black dark:text-gray-2">
+          Stay up to date with Cilium community meetings, events, and activities. Join us for
+          regular discussions and project updates.
+        </p>
+      </div>
 
-        <div className="overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
-          <div className="aspect-w-1 aspect-h-1 sm:aspect-w-16 sm:aspect-h-10 md:aspect-h-12 lg:aspect-h-14">
-            <iframe
-              src="https://zoom-lfx.platform.linuxfoundation.org/meetings/cilium?view=week"
-              title="Cilium Community Calendar"
-              aria-label="Cilium community meetings calendar"
-              className="w-full h-full min-h-[360px] sm:min-h-[600px] border-0"
-              loading="lazy"
-              allowFullScreen
-            />
-          </div>
+      <div className="overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
+        <div className="aspect-w-1 aspect-h-1 sm:aspect-w-16 sm:aspect-h-10 md:aspect-h-12 lg:aspect-h-14">
+          <iframe
+            src="https://zoom-lfx.platform.linuxfoundation.org/meetings/cilium?view=week"
+            title="Cilium Community Calendar"
+            aria-label="Cilium community meetings calendar"
+            className="w-full h-full min-h-[360px] sm:min-h-[600px] border-0"
+            loading="lazy"
+            referrerPolicy="strict-origin-when-cross-origin"
+            allowFullScreen
+          />
         </div>
+      </div>
 
-        <div className="mt-6 text-center">
-          <Button
-            theme="primary-1"
-            to="https://zoom-lfx.platform.linuxfoundation.org/meetings/cilium?view=week"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Open Calendar in New Tab
-            <svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-              />
-            </svg>
-          </Button>
-        </div>
-      </Container>
-    </section>
-  );
-};
+      <div className="mt-6 text-center">
+        <Button
+          theme="primary-1"
+          to="https://zoom-lfx.platform.linuxfoundation.org/meetings/cilium?view=week"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Open Calendar in New Tab
+          <svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+            />
+          </svg>
+        </Button>
+      </div>
+    </Container>
+  </section>
+);
 
 export default CalendarIntegration;

src/components/pages/get-started/architecture/architecture.jsx

@@ -22,6 +22,7 @@ const Architecture = () => (
           title="YouTube video player"
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
           loading="lazy"
+          referrerPolicy="strict-origin-when-cross-origin"
           allowFullScreen
         />
       </div>

src/components/pages/get-started/hero/hero.jsx

@@ -45,6 +45,7 @@ const Hero = ({ className, title, description, size }) => (
           title="YouTube video player"
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
           loading="eager"
+          referrerPolicy="strict-origin-when-cross-origin"
           allowFullScreen
         />
       </div>

src/components/pages/home/featured-talks/featured-talks.jsx

@@ -24,6 +24,7 @@ const FeaturedTalks = ({ heading, talks, className }) => (
               title="YouTube video player"
               className="aspect-video w-full rounded-lg border border-gray-3 dark:border-gray-600 "
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              referrerPolicy="strict-origin-when-cross-origin"
               allowFullScreen
             />
             <Heading

src/components/pages/industries/bullet-section/bullet-section.jsx

@@ -66,6 +66,7 @@ const BulletSection = ({
               src={videoSrc}
               title="YouTube video player"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              referrerPolicy="strict-origin-when-cross-origin"
               allowFullScreen
             />
           )}

src/components/pages/industries/featured-talks/featured-talks.jsx

@@ -24,6 +24,7 @@ const FeaturedTalks = ({ heading, talks, className }) => (
               title="YouTube video player"
               className="aspect-video w-full rounded-lg border border-gray-3"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              referrerPolicy="strict-origin-when-cross-origin"
               allowFullScreen
             />
             <Heading

src/components/pages/use-cases/feature-section/feature-section.jsx

@@ -68,6 +68,7 @@ const FeatureSection = ({
             src={videoSrc}
             title="YouTube video player"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            referrerPolicy="strict-origin-when-cross-origin"
             allowFullScreen
           />
         )}

src/components/pages/use-cases/hero/hero.jsx

@@ -87,6 +87,7 @@ const Hero = ({
               src={videoSrc}
               title="YouTube video player"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              referrerPolicy="strict-origin-when-cross-origin"
               allowFullScreen
             />
           )}