Merge pull request #3323 from pyth-network/add-videos

feat(docs): embed Youtube videos in the docs

Author: nidhi-singh02

apps/developer-hub/content/docs/entropy/protocol-design.mdx

@@ -4,6 +4,8 @@ description: Understanding how Pyth Entropy generates secure random numbers
 icon: Book
 ---
 
+<YouTubeEmbed id="KOfe2KQOmew" title="How Pyth Entropy Works" />
+
 The Entropy protocol implements a secure 2-party random number generation procedure. The protocol
 is an extension of a simple commit/reveal protocol. The original version has the following steps:
 

apps/developer-hub/content/docs/entropy/whats-new-entropyv2.mdx

@@ -4,6 +4,8 @@ description: New features and improvements in Entropy v2
 icon: Sparkle
 ---
 
+<YouTubeEmbed id="8WGkCjlIg58" title="What's New in Entropy v2" />
+
 ## Key Improvements
 
 Pyth Entropy v2 brings new features and improvements that make random number generation more flexible, efficient, and easier to integrate.

apps/developer-hub/content/docs/price-feeds/core/fetch-price-updates.mdx

@@ -6,6 +6,11 @@ slug: /price-feeds/core/fetch-price-updates
 
 import { Callout } from "fumadocs-ui/components/callout";
 
+<YouTubeEmbed
+  id="sIF9lswg_HY"
+  title="The Most Effective Way to Get Prices Onchain"
+/>
+
 The following guide explains how to fetch price updates.
 Price updates can be submitted to the Pyth Price Feeds contract to update the on-chain price.
 Please see [What is a Pull Oracle?](/price-feeds/core/pull-updates) to learn more.

apps/developer-hub/content/docs/price-feeds/core/how-pyth-works/index.mdx

@@ -4,6 +4,11 @@ description: Design Overview - Understand the high-level architecture of the Pyt
 slug: /price-feeds/core/how-pyth-works
 ---
 
+<YouTubeEmbed
+  id="PWo_56qlSx8"
+  title="How Pyth Prices Differ From Other Oracles"
+/>
+
 Pyth is a protocol that allows market participants to publish pricing information on-chain for others to use. The protocol is an interaction between three parties:
 
 1. _Publishers_ submit pricing information to Pyth's oracle program. Pyth has multiple data publishers for every product to improve the accuracy and robustness of the system.

apps/developer-hub/content/docs/price-feeds/core/use-real-time-data/index.mdx

@@ -6,6 +6,11 @@ slug: /price-feeds/core/use-real-time-data
 
 import { Callout } from "fumadocs-ui/components/callout";
 
+<YouTubeEmbed
+  id="25lIVs8b2Ho"
+  title="Different Approaches to Integrate Pyth Prices"
+/>
+
 The following guides demonstrate how to consume Pyth real-time prices on various blockchains.
 These guides are intended for developers building on-chain applications that need the latest price data, i.e., the price data must
 be on the blockchain.

apps/developer-hub/src/components/YouTubeEmbed/index.module.scss

@@ -0,0 +1,11 @@
+@use "@pythnetwork/component-library/theme";
+
+.iframe {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  margin: theme.spacing(6) 0;
+  border: none;
+  border-radius: theme.border-radius("xl");
+  background-color: theme.color("background", "primary");
+  box-shadow: 0 4px 24px rgb(0 0 0 / 12%);
+}

apps/developer-hub/src/components/YouTubeEmbed/index.tsx

@@ -0,0 +1,26 @@
+import clsx from "clsx";
+
+import styles from "./index.module.scss";
+
+type YouTubeEmbedProps = {
+  id: string;
+  title?: string;
+  className?: string;
+};
+
+export const YouTubeEmbed = ({
+  id,
+  title = "YouTube video player",
+  className,
+}: YouTubeEmbedProps) => (
+  <iframe
+    className={clsx(styles.iframe, className)}
+    src={`https://www.youtube.com/embed/${id}`}
+    title={title}
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    referrerPolicy="strict-origin-when-cross-origin"
+    allowFullScreen
+  />
+);
+
+export default YouTubeEmbed;

apps/developer-hub/src/mdx-components.tsx

@@ -6,6 +6,7 @@ import defaultMdxComponents from "fumadocs-ui/mdx";
 import type { MDXComponents } from "mdx/types";
 
 import { APICard, APICards } from "./components/APICard";
+import { YouTubeEmbed } from "./components/YouTubeEmbed";
 import { openapi } from "./lib/openapi";
 
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
@@ -20,5 +21,6 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
     Tab,
     ...components,
     InfoBox: InfoBox,
+    YouTubeEmbed,
   };
 }