From a7b76137afda1eb12a4c4b079aa93353a3b22511 Mon Sep 17 00:00:00 2001
From: Alexandria Roberts <iamlexieonearth@gmail.com>
Date: Fri, 5 Aug 2022 16:08:45 +0800
Subject: [PATCH 1/5] Video component and update everywhere with it

---
 components/Video.tsx                       | 16 ++++++++++++++++
 components/index.ts                        |  1 +
 layout/MDXLayout.tsx                       | 12 ++----------
 pages/ar/cookbook/migrating-a-subgraph.mdx | 12 +++---------
 pages/ar/deploying/subgraph-studio.mdx     | 12 +++---------
 pages/ar/network/curating.mdx              | 12 +++---------
 pages/ar/network/delegating.mdx            | 12 +++---------
 pages/ar/network/explorer.mdx              | 12 +++---------
 pages/ar/querying/billing.mdx              | 12 +++---------
 pages/en/cookbook/migrating-a-subgraph.mdx | 12 +++---------
 pages/en/deploying/subgraph-studio.mdx     | 12 +++---------
 pages/en/network/curating.mdx              | 12 +++---------
 pages/en/network/delegating.mdx            | 12 +++---------
 pages/en/network/explorer.mdx              | 12 +++---------
 pages/en/querying/billing.mdx              | 12 +++---------
 pages/es/cookbook/migrating-a-subgraph.mdx | 12 +++---------
 pages/es/deploying/subgraph-studio.mdx     | 12 +++---------
 pages/es/network/curating.mdx              | 12 +++---------
 pages/es/network/delegating.mdx            | 12 +++---------
 pages/es/network/explorer.mdx              | 12 +++---------
 pages/es/querying/billing.mdx              | 12 +++---------
 pages/ja/cookbook/migrating-a-subgraph.mdx | 12 +++---------
 pages/ja/deploying/subgraph-studio.mdx     | 12 +++---------
 pages/ja/network/curating.mdx              | 12 +++---------
 pages/ja/network/delegating.mdx            | 12 +++---------
 pages/ja/network/explorer.mdx              | 12 +++---------
 pages/ja/querying/billing.mdx              | 12 +++---------
 pages/ko/cookbook/migrating-a-subgraph.mdx | 12 +++---------
 pages/ko/deploying/subgraph-studio.mdx     | 12 +++---------
 pages/ko/network/curating.mdx              | 12 +++---------
 pages/ko/network/delegating.mdx            | 12 +++---------
 pages/ko/network/explorer.mdx              | 12 +++---------
 pages/ko/querying/billing.mdx              | 12 +++---------
 pages/vi/cookbook/migrating-a-subgraph.mdx | 12 +++---------
 pages/vi/deploying/subgraph-studio.mdx     | 12 +++---------
 pages/vi/network/curating.mdx              | 12 +++---------
 pages/vi/network/delegating.mdx            | 12 +++---------
 pages/vi/network/explorer.mdx              | 12 +++---------
 pages/vi/querying/billing.mdx              | 12 +++---------
 pages/zh/cookbook/migrating-a-subgraph.mdx | 12 +++---------
 pages/zh/deploying/subgraph-studio.mdx     | 12 +++---------
 pages/zh/network/curating.mdx              | 12 +++---------
 pages/zh/network/delegating.mdx            | 12 +++---------
 pages/zh/network/explorer.mdx              | 12 +++---------
 pages/zh/querying/billing.mdx              | 12 +++---------
 45 files changed, 145 insertions(+), 388 deletions(-)
 create mode 100644 components/Video.tsx

diff --git a/components/Video.tsx b/components/Video.tsx
new file mode 100644
index 000000000000..cb6d1525793d
--- /dev/null
+++ b/components/Video.tsx
@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react'
+
+export type VideoProps = { src: string } & HTMLAttributes<HTMLVideoElement>
+
+export const Video = ({ src, ...props }: VideoProps) => {
+  return (
+    <figure sx={{ paddingBottom: `${100 / (16 / 9)}%` }} {...props}>
+      <iframe
+        src={src}
+        frameBorder="0"
+        allowFullScreen
+        sx={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%' }}
+      />
+    </figure>
+  )
+}
diff --git a/components/index.ts b/components/index.ts
index 311e6ae9dbcc..6f82a61c90e3 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -10,3 +10,4 @@ export * from './List'
 export * from './NavTree'
 export * from './Paragraph'
 export * from './Table'
+export * from './Video'
diff --git a/layout/MDXLayout.tsx b/layout/MDXLayout.tsx
index 48fef9a31da9..2002afa5d936 100644
--- a/layout/MDXLayout.tsx
+++ b/layout/MDXLayout.tsx
@@ -26,6 +26,7 @@ import {
   ListUnordered,
   Paragraph,
   Table,
+  Video,
 } from '@/components'
 import { useI18n } from '@/i18n'
 import { NavItemGroup } from '@/navigation'
@@ -47,6 +48,7 @@ const mdxComponents = {
   ul: ListUnordered,
   p: Paragraph,
   table: Table,
+  video: Video,
 }
 
 const mdxStyles = {
@@ -56,16 +58,6 @@ const mdxStyles = {
     display: 'block',
     textAlign: 'center',
   },
-  '.video-container': {
-    paddingBottom: `${100 / (16 / 9)}%`,
-  },
-  '.video-iframe': {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    width: '100%',
-    height: '100%',
-  },
 } as ThemeUIStyleObject
 
 export type MDXLayoutProps = PropsWithChildren<
diff --git a/pages/ar/cookbook/migrating-a-subgraph.mdx b/pages/ar/cookbook/migrating-a-subgraph.mdx
index 72ba2126037e..e06275687858 100644
--- a/pages/ar/cookbook/migrating-a-subgraph.mdx
+++ b/pages/ar/cookbook/migrating-a-subgraph.mdx
@@ -2,6 +2,8 @@
 title: ترحيل Subgraph موجود إلى شبكة The Graph
 ---
 
+import { Video } from '@/components'
+
 ## مقدمة
 
 هذا دليل حول كيفية ترحيل الـ subgraph الخاص بك من Hosted Service إلى شبكة The Graph. لقد نجح الترحيل إلى شبكة The Graph لمشاريع مثل Opyn و UMA و mStable و Audius و PoolTogether و Livepeer و RAI و Enzyme و DODO و Opyn و Pickle و BadgerDAO ، وكلها تعتمد على البيانات التي يقدمها المفهرسون على الشبكة. ويوجد الآن أكثر من 200 subgraphs حي على شبكة The Graph، مولدة بذلك رسوم استعلام وفهرسة بيانات web3 بشكل نشط.
@@ -147,15 +149,7 @@ _بينما تتم هذه الآلية حاليا على الشبكة ، ينا
 
 إذا كنت لا تزال في حيرة من أمرك ، فلا تخف! راجع المصادر التالية أو شاهد الفيديو الخاص بنا حول ترحيل الـ subgraphs إلى الشبكة اللامركزية أدناه:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/CzdQ3dFFrjo"
-    title="مشغل فيديو يوتيوب"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
 
 - [عقود شبكة The Graph](https://github.com/graphprotocol/contracts)
 - [ عقد التنسيق](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - العقد الأساسي الذي تلتف حوله GNS
diff --git a/pages/ar/deploying/subgraph-studio.mdx b/pages/ar/deploying/subgraph-studio.mdx
index e89a21361ebd..3ed351ff066f 100644
--- a/pages/ar/deploying/subgraph-studio.mdx
+++ b/pages/ar/deploying/subgraph-studio.mdx
@@ -2,6 +2,8 @@
 title: كيفية استخدام Subgraph Studio
 ---
 
+import { Video } from '@/components'
+
 مرحبًا بك في منصة الاطلاق الجديدة الخاصة بك 👩🏽‍🚀
 
 يعد Subgraph Studio مكانك لبناء وإنشاء الـ subgraphs وإضافة البيانات الوصفية (metadata) ونشرها على المستكشف(Explorer) اللامركزي الجديد (المزيد حول هذا [ هنا ](/network/explorer)).
@@ -66,15 +68,7 @@ title: كيفية استخدام Subgraph Studio
 
 لقد نجحت في الوصول إلى هذا الحد - تهانينا! نشر الـ subgraph يعني أنه تم إنشاء IPFS hash عند نشرك لـ subgraph ضمن CLI وتخزينه في عقود Ethereum الذكية للشبكة. ولنشر الـ subgraph الخاص بك بنجاح ، ستحتاج إلى اتباع الخطوات التالية الموجزة في هذه [ المدونة ](https://thegraph.com/blog/building-with-subgraph-studio). راجع الفيديو أدناه أيضًا:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/HfDgC2oNnwo"
-    title="مشغل فيديو يوتيوب"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/HfDgC2oNnwo" />
 
 تذكر ، أثناء تقدمك في تدفق النشر ، ستتمكن من الدفع(push) إما إلى mainnet أو Rinkeby ، وهي testnet التي ندعمها. إذا كنت مطور subgraph لأول مرة ، فنحن نقترح بشدة أن تبدأ بالنشر على Rinkeby ، وهو مجاني. سيسمح لك ذلك بمعرفة كيفية عمل الـ subgraph في The Graph Explorer وسيسمح لك باختبار عناصر التنسيق.
 
diff --git a/pages/ar/network/curating.mdx b/pages/ar/network/curating.mdx
index bac3c7e33ac3..a22a6397cf4e 100644
--- a/pages/ar/network/curating.mdx
+++ b/pages/ar/network/curating.mdx
@@ -2,6 +2,8 @@
 title: (التنسيق) curating
 ---
 
+import { Video } from '@/components'
+
 المنسقون مهمون للاقتصاد اللامركزي في the Graph. يستخدمون معرفتهم بالنظام البيئي web3 للتقييم والإشارة ل Subgraphs والتي تفهرس بواسطة شبكة The Graph. من خلال المستكشف (Explorer)، يستطيع المنسقون (curators) عرض بيانات الشبكة وذلك لاتخاذ قرارات الإشارة. تقوم شبكة The Graph بمكافئة المنسقين الذين يشيرون إلى ال Subgraphs عالية الجودة بحصة من رسوم الاستعلام التي تولدها ال subgraphs. يتم تحفيز المنسقون(Curators) ليقومون بالإشارة بشكل مبكر. هذه الإشارات من المنسقين مهمة للمفهرسين ، والذين يمكنهم بعد ذلك معالجة أو فهرسة البيانات من ال subgraphs المشار إليها.
 
 يمكن للمنسقين اتخاذ القرار إما بالإشارة إلى إصدار معين من Subgraphs أو الإشارة باستخدام الترحيل التلقائي auto-migrate. عند الإشارة باستخدام الترحيل التلقائي ، ستتم دائما ترقية حصص المنسق إلى أحدث إصدار ينشره المطور. وإذا قررت الإشارة إلى إصدار معين، فستظل الحصص دائما في هذا الإصدار المحدد.
@@ -93,12 +95,4 @@ title: (التنسيق) curating
 
 لازلت مشوشا؟ راجع فيديو دليل التنسيق أدناه:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/VytTEcf0dxQ"
-    title="مشغل فيديو يوتيوب"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/VytTEcf0dxQ" />
diff --git a/pages/ar/network/delegating.mdx b/pages/ar/network/delegating.mdx
index f57ec77ca02a..5a223a56b404 100644
--- a/pages/ar/network/delegating.mdx
+++ b/pages/ar/network/delegating.mdx
@@ -2,6 +2,8 @@
 title: المفوض(Delegator)
 ---
 
+import { Video } from '@/components'
+
 لا يمكن شطب المفوضين بسبب السلوك السيئ ، ولكن هناك ضريبة ودائع على المفوضين لتثبيط اتخاذ القرار السيئ الذي قد يضر بسلامة الشبكة.
 
 سيشرح هذا الدليل كيف تكون مفوضا فعالا في Graph Network. يشارك المفوضون أرباح حصتهم المفوضة مع المفهرسين. يجب أن يستخدم المفوض أفضل حكم لديه لاختيار المفهرسين بناء على عوامل متعددة. يرجى ملاحظة أن هذا الدليل لن يتطرق لخطوات مثل إعداد Metamask ، حيث أن هذه المعلومات متاحة على نطاق واسع على الإنترنت. يوجد ثلاثة أقسام في هذا الدليل:
@@ -91,12 +93,4 @@ At times, attempts to delegate to indexers via MetaMask can fail and result in p
 
 This guide provides a full review of this document, and how to consider everything in this document while interacting with the UI.
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/2G7S2gdURdc"
-    title="مشغل فيديو يوتيوب"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/2G7S2gdURdc" />
diff --git a/pages/ar/network/explorer.mdx b/pages/ar/network/explorer.mdx
index db5a72836cf9..e13d1fc8c0f5 100644
--- a/pages/ar/network/explorer.mdx
+++ b/pages/ar/network/explorer.mdx
@@ -2,17 +2,11 @@
 title: مستكشف
 ---
 
+import { Video } from '@/components'
+
 مرحبا بك في مستكشف Graph ، أو كما نحب أن نسميها ، بوابتك اللامركزية في عالم subgraphs وبيانات الشبكة. 👩🏽‍🚀 مستكشف TheGraph يتكون من عدة اجزاء حيث يمكنك التفاعل مع مطوري Subgraphs الاخرين ، ومطوري dApp ،والمنسقين والمفهرسين، والمفوضين. للحصول على نظرة عامة حول the Graph Explorer، راجع الفيديو أدناه (أو تابع القراءة أدناه):
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/u224xf7rEBY"
-    title="مشغل فيديو يوتيوب"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/u224xf7rEBY" />
 
 ## Subgraphs
 
diff --git a/pages/ar/querying/billing.mdx b/pages/ar/querying/billing.mdx
index b41808395eb7..ef4cf3b5299e 100644
--- a/pages/ar/querying/billing.mdx
+++ b/pages/ar/querying/billing.mdx
@@ -2,6 +2,8 @@
 title: الفوترة على Subgraph Studio
 ---
 
+import { Video } from '@/components'
+
 ### نظره عامة
 
 الفواتير هي كشوفات بمبالغ السداد المستحقة على العميل ويتم إنشاؤها عادةً على أساس أسبوعي في النظام. سيُطلب منك دفع الرسوم بناءً على رسوم الاستعلام التي تنشئها باستخدام مفاتيح API الخاصة بك. يسري عقد الفوترة على شبكة [ Polygon ](https://polygon.technology/). وسيسمح لك بما يلي:
@@ -39,15 +41,7 @@ title: الفوترة على Subgraph Studio
 
 للحصول على عرض توضيحي سريع لكيفية عمل الفوترة في Subgraph Studio ، راجع الفيديو أدناه:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/UrfIpm-Vlgs"
-    title="مشغل فيديو يوتيوب"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
 
 ### مستخدمو Multisig
 
diff --git a/pages/en/cookbook/migrating-a-subgraph.mdx b/pages/en/cookbook/migrating-a-subgraph.mdx
index b65e32098b6e..e0af03e6c75f 100644
--- a/pages/en/cookbook/migrating-a-subgraph.mdx
+++ b/pages/en/cookbook/migrating-a-subgraph.mdx
@@ -2,6 +2,8 @@
 title: Migrating an Existing Subgraph to The Graph Network
 ---
 
+import { Video } from '@/components'
+
 ## Introduction
 
 This is a guide on how to migrate your subgraph from the Hosted Service to The Graph Network. The migration to The Graph Network has been successful for projects like Opyn, UMA, mStable, Audius, PoolTogether, Livepeer, RAI, Enzyme, DODO, Opyn, Pickle, and BadgerDAO all of which are relying on data served by Indexers on the network. There are now over 200 subgraphs live on The Graph Network, generating query fees and actively indexing web3 data.
@@ -147,15 +149,7 @@ Remember that it's a dynamic and growing market, but how you interact with it is
 
 If you're still confused, fear not! Check out the following resources or watch our video guide on migrating subgraphs to the decentralized network below:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/CzdQ3dFFrjo"
-    title="YouTube video player"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
 
 - [The Graph Network Contracts](https://github.com/graphprotocol/contracts)
 - [Curation Contract](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - the underlying contract that the GNS wraps around
diff --git a/pages/en/deploying/subgraph-studio.mdx b/pages/en/deploying/subgraph-studio.mdx
index fd97944f77fc..96775695709b 100644
--- a/pages/en/deploying/subgraph-studio.mdx
+++ b/pages/en/deploying/subgraph-studio.mdx
@@ -2,6 +2,8 @@
 title: How to Use the Subgraph Studio
 ---
 
+import { Video } from '@/components'
+
 Welcome to your new launchpad 👩🏽‍🚀
 
 The Subgraph Studio is your place to build and create subgraphs, add metadata, and publish them to the new decentralized Explorer (more on that [here](/network/explorer)).
@@ -66,15 +68,7 @@ If you’d like to test your subgraph before publishing it to the network, you c
 
 You’ve made it this far - congrats! Publishing your subgraph means that an IPFS hash was generated when you deployed the subgraph within the CLI and is stored in the network’s Ethereum smart contracts. In order to publish your subgraph successfully, you’ll need to go through the following steps outlined in this [blog](https://thegraph.com/blog/building-with-subgraph-studio). Check out the video overview below as well:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/HfDgC2oNnwo"
-    title="YouTube video player"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/HfDgC2oNnwo" />
 
 Remember, while you’re going through your publishing flow, you’ll be able to push to either mainnet or Rinkeby, the testnet we support. If you’re a first-time subgraph developer, we highly suggest you start with publishing to Rinkeby, which is free to do. This will allow you to see how the subgraph will work in The Graph Explorer and will allow you to test curation elements.
 
diff --git a/pages/en/network/curating.mdx b/pages/en/network/curating.mdx
index 90ad193042f9..7cc08894d9e4 100644
--- a/pages/en/network/curating.mdx
+++ b/pages/en/network/curating.mdx
@@ -2,6 +2,8 @@
 title: Curating
 ---
 
+import { Video } from '@/components'
+
 Curators are critical to the Graph decentralized economy. They use their knowledge of the web3 ecosystem to assess and signal on the subgraphs that should be indexed by The Graph Network. Through the Explorer, curators are able to view network data to make signaling decisions. The Graph Network rewards curators who signal on good quality subgraphs with a share of the query fees that subgraphs generate. Curators are economically incentivized to signal early. These cues from curators are important for Indexers, who can then process or index the data from these signaled subgraphs.
 
 When signaling, curators can decide to signal on a specific version of the subgraph or to signal using auto-migrate. When signaling using auto-migrate, a curator’s shares will always be upgraded to the latest version published by the developer. If you decide to signal on a specific version instead, shares will always stay on this specific version.
@@ -93,12 +95,4 @@ Curation shares cannot be "bought" or "sold" like other ERC20 tokens that you ma
 
 Still confused? Check out our Curation video guide below:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/VytTEcf0dxQ"
-    title="YouTube video player"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/VytTEcf0dxQ" />
diff --git a/pages/en/network/delegating.mdx b/pages/en/network/delegating.mdx
index df83eb9bc9f8..5098c1e767e5 100644
--- a/pages/en/network/delegating.mdx
+++ b/pages/en/network/delegating.mdx
@@ -2,6 +2,8 @@
 title: Delegating
 ---
 
+import { Video } from '@/components'
+
 Delegators are network participants who delegate (i.e., "stake") GRT to one or more Indexers. Delegators contribute to securing the network without running a Graph Node themselves.
 
 By delegating to an Indexer, Delegators earn a portion of the Indexer's query fees and rewards. The amount of queries an Indexer can process depends on the Indexer's own (and delegated) stake and the price the Indexer charges for each query, so the more stake that is allocated to an Indexer, the more potential queries they can process.
@@ -95,12 +97,4 @@ At times, attempts to delegate to indexers via MetaMask can fail and result in p
 
 This guide provides a full review of this document, and how to consider everything in this document while interacting with the UI.
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/2G7S2gdURdc"
-    title="YouTube video player"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/2G7S2gdURdc" />
diff --git a/pages/en/network/explorer.mdx b/pages/en/network/explorer.mdx
index ac44d3af1481..59d3581aca25 100644
--- a/pages/en/network/explorer.mdx
+++ b/pages/en/network/explorer.mdx
@@ -2,17 +2,11 @@
 title: Graph Explorer
 ---
 
+import { Video } from '@/components'
+
 Welcome to the Graph Explorer, or as we like to call it, your decentralized portal into the world of subgraphs and network data. 👩🏽‍🚀 The Graph Explorer consists of multiple parts where you can interact with other subgraph developers, dapp developers, Curators, Indexers, and Delegators. For a general overview of the Graph Explorer, check out the video below (or keep reading below):
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/u224xf7rEBY"
-    title="YouTube video player"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/u224xf7rEBY" />
 
 ## Subgraphs
 
diff --git a/pages/en/querying/billing.mdx b/pages/en/querying/billing.mdx
index b139034ea88b..d5561a87dc27 100644
--- a/pages/en/querying/billing.mdx
+++ b/pages/en/querying/billing.mdx
@@ -2,6 +2,8 @@
 title: Billing on the Subgraph Studio
 ---
 
+import { Video } from '@/components'
+
 ### Overview
 
 Invoices are statements of payment amounts owed by a customer and are typically generated on a weekly basis in the system. You’ll be required to pay fees based on the query fees you generate using your API keys. The billing contract lives on the [Polygon](https://polygon.technology/) network. It’ll allow you to:
@@ -39,15 +41,7 @@ There are 4 states your invoice can be in:
 
 For a quick demo of how billing works on the Subgraph Studio, check out the video below:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/UrfIpm-Vlgs"
-    title="YouTube video player"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
 
 ### Multisig Users
 
diff --git a/pages/es/cookbook/migrating-a-subgraph.mdx b/pages/es/cookbook/migrating-a-subgraph.mdx
index ebde0e4a402b..70c7c0c47e5b 100644
--- a/pages/es/cookbook/migrating-a-subgraph.mdx
+++ b/pages/es/cookbook/migrating-a-subgraph.mdx
@@ -2,6 +2,8 @@
 title: Migrating an Existing Subgraph to The Graph Network
 ---
 
+import { Video } from '@/components'
+
 ## Introducción
 
 This is a guide on how to migrate your subgraph from the Hosted Service to The Graph Network. The migration to The Graph Network has been successful for projects like Opyn, UMA, mStable, Audius, PoolTogether, Livepeer, RAI, Enzyme, DODO, Opyn, Pickle, and BadgerDAO all of which are relying on data served by Indexers on the network. There are now over 200 subgraphs live on The Graph Network, generating query fees and actively indexing web3 data.
@@ -147,15 +149,7 @@ Remember that it's a dynamic and growing market, but how you interact with it is
 
 If you're still confused, fear not! Check out the following resources or watch our video guide on migrating subgraphs to the decentralized network below:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/CzdQ3dFFrjo"
-    title="Reproductor de video de YouTube"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
 
 - [The Graph Network Contracts](https://github.com/graphprotocol/contracts)
 - [Curation Contract](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - the underlying contract that the GNS wraps around
diff --git a/pages/es/deploying/subgraph-studio.mdx b/pages/es/deploying/subgraph-studio.mdx
index 067e11f755b6..d89306becd82 100644
--- a/pages/es/deploying/subgraph-studio.mdx
+++ b/pages/es/deploying/subgraph-studio.mdx
@@ -2,6 +2,8 @@
 title: How to Use the Subgraph Studio
 ---
 
+import { Video } from '@/components'
+
 Welcome to your new launchpad 👩🏽‍🚀
 
 The Subgraph Studio is your place to build and create subgraphs, add metadata, and publish them to the new decentralized Explorer (more on that [here](/network/explorer)).
@@ -66,15 +68,7 @@ If you’d like to test your subgraph before publishing it to the network, you c
 
 You’ve made it this far - congrats! Publishing your subgraph means that an IPFS hash was generated when you deployed the subgraph within the CLI and is stored in the network’s Ethereum smart contracts. In order to publish your subgraph successfully, you’ll need to go through the following steps outlined in this [blog](https://thegraph.com/blog/building-with-subgraph-studio). Check out the video overview below as well:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/HfDgC2oNnwo"
-    title="Reproductor de video de YouTube"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/HfDgC2oNnwo" />
 
 Remember, while you’re going through your publishing flow, you’ll be able to push to either mainnet or Rinkeby, the testnet we support. If you’re a first time subgraph developer, we highly suggest you start with publishing to Rinkeby, which is free to do. This will allow you to see how the subgraph will work in The Graph Explorer and will allow you to test curation elements.
 
diff --git a/pages/es/network/curating.mdx b/pages/es/network/curating.mdx
index bc1fa493420e..a7f2f7ab2245 100644
--- a/pages/es/network/curating.mdx
+++ b/pages/es/network/curating.mdx
@@ -2,6 +2,8 @@
 title: curación
 ---
 
+import { Video } from '@/components'
+
 Los curadores son vitales para la economía descentralizada que conforma a The Graph. Ellos utilizan su conocimiento sobre el ecosistema Web3 para calificar y señalar los subgrafos que deben ser indexados en la red de The Graph. A través del explorador, los curadores pueden ver los datos de la red y tomar decisiones sobre la señalización. The Graph Network recompensa a los curadores que señalan subgrafos valiosos para la red ya que ganan una parte de las tarifas de consulta que generan los subgrafos. Los curadores están motivados económicamente a través de la señalización rápida de dichos subgrafos. Estas señales de los curadores son importantes para los Indexadores, quienes luego pueden procesar o indexar los datos de estos subgrafos señalados.
 
 Al señalar, los curadores pueden decidir entre señalar en una versión específica del subgrafo o hacerlo usando la opción de auto migración. Cuando se señala mediante la auto migración, las acciones de un curador siempre se actualizarán a la última versión publicada por el desarrollador. Si, en cambio, decides señalar una versión específica, las acciones siempre permanecerán en esa versión específica.
@@ -93,12 +95,4 @@ Las participaciones de un curador no se pueden "comprar" o "vender" como otros t
 
 ¿Sigues confundido? Te invitamos a echarle un vistazo a nuestra guía en un vídeo que aborda todo sobre la curación:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/VytTEcf0dxQ"
-    title="Reproductor de video de YouTube"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/VytTEcf0dxQ" />
diff --git a/pages/es/network/delegating.mdx b/pages/es/network/delegating.mdx
index fc11dd0628fc..cb09370be55e 100644
--- a/pages/es/network/delegating.mdx
+++ b/pages/es/network/delegating.mdx
@@ -2,6 +2,8 @@
 title: Delegador
 ---
 
+import { Video } from '@/components'
+
 Los delegadores son participantes de la red que delegan (es decir, "hacen stake") GRT a uno o varios indexadores. Los delegadores contribuyen a la seguridad de la red sin ejecutar ellos mismos un Graph Node.
 
 Al delegar en un Indexador, los Delegadores ganan una parte de las tarifas de las consultas del Indexador y de las recompensas. La cantidad de consultas que puede procesar un Indexador depende de su propio stake (y del delegado) y del precio que el indexador cobra por cada consulta, por lo que cuanto más participación se asigne a un Indexador, más consultas potenciales podrá procesar.
@@ -96,12 +98,4 @@ A veces, los intentos de delegar a los Indexadores a través de MetaMask pueden
 
 Esta guía proporciona una revisión completa de este documento, y cómo tener en cuenta todo lo que contiene mientras se interactúa con la interfaz de usuario.
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/2G7S2gdURdc"
-    title="Reproductor de video de YouTube"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/2G7S2gdURdc" />
diff --git a/pages/es/network/explorer.mdx b/pages/es/network/explorer.mdx
index e25e1610212c..fca52963759b 100644
--- a/pages/es/network/explorer.mdx
+++ b/pages/es/network/explorer.mdx
@@ -2,17 +2,11 @@
 title: Graph Explorer
 ---
 
+import { Video } from '@/components'
+
 Bienvenido al explorador de The Graph, o como nos gusta llamarlo, tu portal descentralizado al mundo de los subgrafos y los datos de la red. 👩🏽‍🚀 Este explorador de The Graph consta de varias partes en las que puedes interactuar con otros desarrolladores de subgrafos, desarrolladores de dApp, Curadores, Indexadores y Delegadores. Para obtener una descripción general de The Graph Explorer, échale un vistazo al siguiente video (o sigue leyendo lo que hemos escrito para ti):
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/u224xf7rEBY"
-    title="Reproductor de video de YouTube"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/u224xf7rEBY" />
 
 ## Subgrafos
 
diff --git a/pages/es/querying/billing.mdx b/pages/es/querying/billing.mdx
index 60c6dd0390ae..fdd472cd64fe 100644
--- a/pages/es/querying/billing.mdx
+++ b/pages/es/querying/billing.mdx
@@ -2,6 +2,8 @@
 title: Facturación en Subgraph Studio
 ---
 
+import { Video } from '@/components'
+
 ### Descripción
 
 Las facturas son extractos de los importes de pago que debe un cliente y suelen generarse semanalmente en el sistema. Se te pedirá que pagues tarifas basadas en las tarifas de consulta que generes utilizando tus claves API. El contrato de facturación vive en la red [Polygon](https://polygon.technology/). Te permitirá:
@@ -39,15 +41,7 @@ Hay 4 estados en los que puede estar tu factura:
 
 Si quieres ver una demostración rápida de cómo funciona la facturación en Subgraph Studio, mira el siguiente video:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/UrfIpm-Vlgs"
-    title="Reproductor de video de YouTube"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
 
 ### Usuarios Multisig
 
diff --git a/pages/ja/cookbook/migrating-a-subgraph.mdx b/pages/ja/cookbook/migrating-a-subgraph.mdx
index a08862280a0f..bb6d5d72016a 100644
--- a/pages/ja/cookbook/migrating-a-subgraph.mdx
+++ b/pages/ja/cookbook/migrating-a-subgraph.mdx
@@ -2,6 +2,8 @@
 title: 既存のサブグラフをグラフネットワークに移行する
 ---
 
+import { Video } from '@/components'
+
 ## イントロダクション
 
 本ガイドは、サブグラフをホステッドサービスから The Graph Network に移行するためのガイドです。The Graph Network への移行は、Opyn、UMA、mStable、Audius、PoolTogether、Livepeer、RAI、Enzyme、DODO、Opyn、Pickle、BadgerDAO などのプロジェクトで成功を収めており、これらのプロジェクトはすべて、ネットワーク上の Indexer が提供するデータに依存しています。現在、The Graph Network には 200 以上のサブグラフが登録されており、クエリフィーを生成し、Web3 データのインデックスを積極的に作成しています。
@@ -147,15 +149,7 @@ The Graph Network が真の意味で分散化されるためには、プロト
 
 まだよくわからないという方も、ご安心ください。以下のリソースをチェックしたり、分散型ネットワークへのサブグラフの移行に関するビデオガイドをご覧ください:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/CzdQ3dFFrjo"
-    title="YouTube ビデオプレイヤー"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
 
 - [The Graph Network のコントラクト](https://github.com/graphprotocol/contracts)
 - [キュレーションコントラクト](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - GNS が包括する基本的なコントラクト
diff --git a/pages/ja/deploying/subgraph-studio.mdx b/pages/ja/deploying/subgraph-studio.mdx
index 6864c9664f96..ecf17e97ab33 100644
--- a/pages/ja/deploying/subgraph-studio.mdx
+++ b/pages/ja/deploying/subgraph-studio.mdx
@@ -2,6 +2,8 @@
 title: Subgraph Studioの使い方
 ---
 
+import { Video } from '@/components'
+
 新しいローンチパッドへようこそ 👩🏽‍🚀
 
 Subgraph Studio は、サブグラフを構築・作成し、メタデータを追加して、新しい分散型エクスプローラーに公開するための場所です（詳細は[こちら](/network/explorer)）
@@ -66,15 +68,7 @@ The Graph Network の機能やネットワークは順次追加されていき
 
 ここまで来ました - おめでとうございます。サブグラフの公開とは、CLI 内でサブグラフを展開した際に IPFS ハッシュが生成され、ネットワークの Ethereum スマートコントラクトに保存されることを意味します。サブグラフの公開を成功させるためには、この[ブログ](https://thegraph.com/blog/building-with-subgraph-studio)で紹介している以下のステップを踏む必要があります。以下のビデオ概要もチェックしてみてください。
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/HfDgC2oNnwo"
-    title="YouTube ビデオプレイヤー"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/HfDgC2oNnwo" />
 
 公開する際には、メインネットまたはテストネットである Rinkeby のどちらかに公開することができます。初めてサブグラフを開発される方は、まず Rinkeby への公開から始めることをお勧めします。これにより、サブグラフが The Graph Explorer でどのように動作するかを確認することができ、キュレーション要素をテストすることができます。
 
diff --git a/pages/ja/network/curating.mdx b/pages/ja/network/curating.mdx
index 002865076e9b..69e44602aa82 100644
--- a/pages/ja/network/curating.mdx
+++ b/pages/ja/network/curating.mdx
@@ -2,6 +2,8 @@
 title: キュレーター
 ---
 
+import { Video } from '@/components'
+
 キュレーターは、グラフの分散型経済にとって重要な存在です。 キューレーターは、web3 のエコシステムに関する知識を用いて、グラフネットワークがインデックスを付けるべきサブグラフを評価し、シグナルを送ります。 キュレーターはエクスプローラーを通じてネットワークのデータを見て、シグナルを出す判断をすることができます。グラフネットワークは、良質なサブグラフにシグナルを送ったキュレーターに、サブグラフが生み出すクエリフィーのシェアを与えます。 キュレーターには、早期にシグナルを送るという経済的なインセンティブが働きます。 キュレーターからのシグナルはインデクサーにとって非常に重要で、インデクサーはシグナルを受けたサブグラフからデータを処理したり、インデックスを作成したりすることができます。
 
 シグナリングの際、キュレーターはサブグラフの特定のバージョンでシグナリングするか、auto-migrate を使ってシグナリングするかを決めることができます。 Auto-migrate を使ってシグナリングすると、キュレーターのシェアは常に開発者が公開した最新バージョンにアップグレードされます。 代わりに特定のバージョンでシグナルを送ることにした場合、シェアは常にその特定のバージョンのままとなります。
@@ -93,12 +95,4 @@ The Graph の場合は、 [Bancor が実装しているボンディングカー
 
 まだ不明点がありますか？ その他の不明点に関しては、 以下のキュレーションビデオガイドをご覧ください：
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/VytTEcf0dxQ"
-    title="YouTubeビデオプレーヤー"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/VytTEcf0dxQ" />
diff --git a/pages/ja/network/delegating.mdx b/pages/ja/network/delegating.mdx
index e8c482014bd8..6872963bbda2 100644
--- a/pages/ja/network/delegating.mdx
+++ b/pages/ja/network/delegating.mdx
@@ -2,6 +2,8 @@
 title: デリゲーティング
 ---
 
+import { Video } from '@/components'
+
 デリゲーターは悪意の行動をしてもスラッシュされないが、デリゲーターにはデポジット税が課せられ、ネットワークの整合性を損なう可能性のある悪い意思決定を抑止します。
 
 このガイドでは、グラフネットワークで効果的なデリゲーターになるための方法を説明します。 デリゲーターは、デリゲートされたステークのすべてのインデクサーとともにプロトコルの収益を共有します。 デリゲーターは、複数の要素を考慮した上で、最善の判断でインデクサーを選ばなければなりません。 このガイドでは、メタマスクの適切な設定方法などについては説明しません。このガイドには 3 つのセクションがあります。 There are three sections in this guide:
@@ -94,12 +96,4 @@ At times, attempts to delegate to indexers via MetaMask can fail and result in p
 
 This guide provides a full review of this document, and how to consider everything in this document while interacting with the UI.
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/2G7S2gdURdc"
-    title="YouTubeビデオプレーヤー"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/2G7S2gdURdc" />
diff --git a/pages/ja/network/explorer.mdx b/pages/ja/network/explorer.mdx
index 8af0732540d0..21d0a625def9 100644
--- a/pages/ja/network/explorer.mdx
+++ b/pages/ja/network/explorer.mdx
@@ -2,17 +2,11 @@
 title: エクスプローラー
 ---
 
+import { Video } from '@/components'
+
 グラフエクスプローラーは、サブグラフとネットワークデータの世界への分散型ポータルです。 👩🏽‍🚀 グラフエクスプローラーは、他のサブグラフ開発者、dapp 開発者、キュレーター、インデクサー、デリゲーターと交流できる複数のパートで構成されています。 グラフエクスプローラーの概要については、以下のビデオをご覧ください。
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/u224xf7rEBY"
-    title="YouTube ビデオプレイヤー"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/u224xf7rEBY" />
 
 ## サブグラフ
 
diff --git a/pages/ja/querying/billing.mdx b/pages/ja/querying/billing.mdx
index 5eac4d88a13d..6261be27a9e3 100644
--- a/pages/ja/querying/billing.mdx
+++ b/pages/ja/querying/billing.mdx
@@ -2,6 +2,8 @@
 title: サブグラフスタジオでの課金
 ---
 
+import { Video } from '@/components'
+
 ### 概要
 
 請求書は、顧客が支払うべき支払い金額の明細であり、通常、システムでは週単位で生成されます。お客様の API キーを使用して生成したクエリ料に基づいて料金を支払う必要があります。課金コントラクトは、[Polygon](https://polygon.technology/)ネットワーク上に存在します。これにより、以下のことが可能になります:
@@ -39,15 +41,7 @@ title: サブグラフスタジオでの課金
 
 Subgraph Studio 上での課金機能のデモについては、以下のビデオをご覧ください:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/UrfIpm-Vlgs"
-    title="YouTube ビデオプレイヤー"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
 
 ### マルチシグユーザー
 
diff --git a/pages/ko/cookbook/migrating-a-subgraph.mdx b/pages/ko/cookbook/migrating-a-subgraph.mdx
index 141fede1b8c4..60d14dd389ef 100644
--- a/pages/ko/cookbook/migrating-a-subgraph.mdx
+++ b/pages/ko/cookbook/migrating-a-subgraph.mdx
@@ -2,6 +2,8 @@
 title: 기존 서브그래프를 그래프 네트워크로 마이그레이션하기
 ---
 
+import { Video } from '@/components'
+
 ## 소개
 
 이것은 호스팅 서비스에서 그래프 네트워크로의 서브그래프 마이그레이션(호스팅 서비스라고도 함)에 대한 가이드입니다. The Graph Network로의 마이그레이션은 네트워크의 인덱서가 제공하는 데이터에 의존하는 Opyn, UMA, mStable, Audius, PoolTogether, Livepeer, RAI, Enzyme, DODO, Opyn, Pickle 및 BadgerDAO와 같은 프로젝트에서 성공적이었습니다. 현재 그래프 네트워크에는 200개 이상의 서브그래프가 존재하며 쿼리 비용을 생성하고 web3 데이터를 적극적으로 인덱싱합니다.
@@ -147,15 +149,7 @@ While you get to decide on your query budget, there is no guarantee that an Inde
 
 If you're still confused, fear not! Check out the following resources or watch our video guide on migrating subgraphs to the decentralized network below:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/CzdQ3dFFrjo"
-    title="YouTubeビデオプレーヤー"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
 
 - [The Graph Network Contracts](https://github.com/graphprotocol/contracts)
 - [Curation Contract](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - the underlying contract that the GNS wraps around
diff --git a/pages/ko/deploying/subgraph-studio.mdx b/pages/ko/deploying/subgraph-studio.mdx
index aa43b8606da0..9652040dcaac 100644
--- a/pages/ko/deploying/subgraph-studio.mdx
+++ b/pages/ko/deploying/subgraph-studio.mdx
@@ -2,6 +2,8 @@
 title: Subgraph Studio 사용법
 ---
 
+import { Video } from '@/components'
+
 당신의 새로운 런치패드에 오신 것을 환영합니다 👩🏽‍🚀
 
 Subgraph Studio는 서브그래프를 작성 및 생성하고, 메타데이터를 추가하고, 새로운 분산 탐색기에 게시할 수 있는 곳입니다(자세한 내용은 [여기](/network/explorer)를 확인하세요).
@@ -66,15 +68,7 @@ The Graph 네트워크는 아직 호스팅 서비스에서 사용할 수 있는
 
 여러분은 여기까지 왔습니다. 축하드립니다! 서브그래프를 게시한다는 것은 CLI 내에서 서브그래프를 배포할 때 IPFS 해시가 생성되었고, 네트워크의 이더리움 스마트 컨트랙트에 저장되었음을 의미합니다. 서브그래프를 성공적으로 게시하려면 [이 블로그](https://thegraph.com/blog/building-with-subgraph-studio)에 설명된 다음 단계를 거쳐야 합니다. 아래의 비디오 개요도 확인하시기 바랍니다.
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/HfDgC2oNnwo"
-    title="YouTubeビデオプレーヤー"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/HfDgC2oNnwo" />
 
 퍼블리싱 플로우를 진행하는 동안 메인넷이나 우리가 지원하는 테스트넷인 Rinkeby로 푸시할 수 있음을 기억하시기 바랍니다. 서브그래프 개발자가 처음이라면 무료인 Rinkeby에 퍼블리싱하는 것으로 시작하는 것이 좋습니다. 이를 통해 그래프 탐색기에서 서브그래프가 어떻게 작동하는지 확인하고 큐레이션 요소를 테스트할 수 있습니다.
 
diff --git a/pages/ko/network/curating.mdx b/pages/ko/network/curating.mdx
index 2d1806794b11..e87b396888a9 100644
--- a/pages/ko/network/curating.mdx
+++ b/pages/ko/network/curating.mdx
@@ -2,6 +2,8 @@
 title: 큐레이팅
 ---
 
+import { Video } from '@/components'
+
 큐레이터들은 더 그래프의 탈중앙화 경제에 매우 중요한 역할을 합니다. 이들은 웹3 생태계에 대한 지식을 활용하여 그래프 네트워크에 의해 색인화되어야 하는 서브그래프에 대한 평가와 신호를 수행합니다. 탐색기를 통해 큐레이터는 네트워크 데이터를 보고 신호 전달 결정을 내릴 수 있습니다. 더그래프 네트워크는 양질의 서브그래프에 신호를 보내는 큐레이터에게 서브그래프가 생성하는 쿼리 수수료에 대한 몫을 보상합니다. 큐레이터들은 이른 신호를 보내도록 경제적으로 장려된다. 큐레이터의 이러한 신호들은 신호되어진 서브그래프들로부터 데이터를 처리하거나 인덱싱 할 수 있는 인덱서들에게 중요합니다.
 
 신호를 보낼 때 큐레이터는 서브그래프의 특정 버전에 신호를 보내거나 자동 마이그레이션을 사용하여 신호를 보내기로 결정할 수 있습니다. 자동 마이그레이션을 사용하여 신호를 보낼 때 큐레이터의 공유는 항상 개발자가 게시한 최신 버전으로 업그레이드됩니다. 만약, 여러분이 이를 대신하여 특정 버전에서 신호를 보내기로 결정하면 공유는 항상 이 특정 버전으로 유지됩니다.
@@ -93,12 +95,4 @@ title: 큐레이팅
 
 아직도 혼란스러우신가요? 아래의 큐레이션 비디오 가이드를 확인해보시길 바랍니다.
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/VytTEcf0dxQ"
-    title="YouTubeビデオプレーヤー"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/VytTEcf0dxQ" />
diff --git a/pages/ko/network/delegating.mdx b/pages/ko/network/delegating.mdx
index 4df6dae7dd71..d4dcb113d4c8 100644
--- a/pages/ko/network/delegating.mdx
+++ b/pages/ko/network/delegating.mdx
@@ -2,6 +2,8 @@
 title: 위임하기
 ---
 
+import { Video } from '@/components'
+
 위임자는 나쁜 행동으로 인해 슬래싱 삭감을 받진 않지만, 네트워크의 무결성을 해칠 수 있는 잘못된 의사 결정에 대한 인센티브를 없애기 위해 위임자에게 보증금이 부과됩니다.
 
 이 가이드는 Graph 네트워크에서 효과적인 위임자가 되는 방법을 설명합니다. 위임자는 그들의 지분을 위임한 모든 인덱서와 함께 프로토콜의 수익을 공유합니다. 위임자는 여러 요소를 기반으로 인덱서를 선택하기 위해 최선의 판단을 내려야 합니다. 이 가이드는 메타마스크를 올바르게 설정하는 것과 같은 단계를 다루지 않습니다. 해당 정보는 인터넷에 널리 퍼져 있기 때문입니다. 이 가이드에는 세 가지 섹션이 존재합니다:
@@ -92,12 +94,4 @@ At times, attempts to delegate to indexers via MetaMask can fail and result in p
 
 This guide provides a full review of this document, and how to consider everything in this document while interacting with the UI.
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/2G7S2gdURdc"
-    title="YouTubeビデオプレーヤー"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/2G7S2gdURdc" />
diff --git a/pages/ko/network/explorer.mdx b/pages/ko/network/explorer.mdx
index f7cef32aba8d..919c0dd88e46 100644
--- a/pages/ko/network/explorer.mdx
+++ b/pages/ko/network/explorer.mdx
@@ -2,17 +2,11 @@
 title: 탐색기
 ---
 
+import { Video } from '@/components'
+
 그래프 탐색기, 혹은 우리가 흔히 부르는 것 처럼, 서브그래프와 네트워크 데이터의 세계로 향하는 탈중앙화 포탈에 오신것을 환영합니다! 그래프 탐색기는 다른 서브그래프 개발자, dapp 개발자, 큐레이터, 인덱서 및 위임자와 상호 작용할 수 있는 다양한 부분들로 구성됩니다. 그래프 탐색기에 대한 일반적인 개요를 알아보기 위해 아래의 비디오를 확인하세요.
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/u224xf7rEBY"
-    title="YouTubeビデオプレーヤー"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/u224xf7rEBY" />
 
 ## 서브그래프
 
diff --git a/pages/ko/querying/billing.mdx b/pages/ko/querying/billing.mdx
index 0d4433e3f939..29668d054b7f 100644
--- a/pages/ko/querying/billing.mdx
+++ b/pages/ko/querying/billing.mdx
@@ -2,6 +2,8 @@
 title: Subgraph Studio상의 청구
 ---
 
+import { Video } from '@/components'
+
 ### 개요
 
 인보이스는 고객이 지불해야 하는 지불 금액의 명세서로, 일반적으로 시스템에서 일주일 단위로 생성됩니다. API 키를 사용하여 생성한 쿼리 수수료에 따라 수수료를 지불해야 합니다. 청구 컨트랙트는 [Polygon](https://polygon.technology/) 네트워크에 존재합니다. 다음을 수행할 수 있습니다:
@@ -39,15 +41,7 @@ API 키를 사용한 경우 매주 말에 이 기간 동안 생성한 쿼리 수
 
 Subgraph Studio에서 청구가 작동하는 방식에 대한 빠른 이해를 위해 아래의 비디오를 시청해 주시기 바랍니다:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/UrfIpm-Vlgs"
-    title="YouTubeビデオプレーヤー"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
 
 ### Multisig Users
 
diff --git a/pages/vi/cookbook/migrating-a-subgraph.mdx b/pages/vi/cookbook/migrating-a-subgraph.mdx
index 5f9315daf8d1..9bc23f898243 100644
--- a/pages/vi/cookbook/migrating-a-subgraph.mdx
+++ b/pages/vi/cookbook/migrating-a-subgraph.mdx
@@ -2,6 +2,8 @@
 title: Migrating an Existing Subgraph to The Graph Network
 ---
 
+import { Video } from '@/components'
+
 ## Giới thiệu
 
 This is a guide on how to migrate your subgraph from the Hosted Service to The Graph Network. The migration to The Graph Network has been successful for projects like Opyn, UMA, mStable, Audius, PoolTogether, Livepeer, RAI, Enzyme, DODO, Opyn, Pickle, and BadgerDAO all of which are relying on data served by Indexers on the network. There are now over 200 subgraphs live on The Graph Network, generating query fees and actively indexing web3 data.
@@ -147,15 +149,7 @@ Remember that it's a dynamic and growing market, but how you interact with it is
 
 If you're still confused, fear not! Check out the following resources or watch our video guide on migrating subgraphs to the decentralized network below:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/CzdQ3dFFrjo"
-    title="Trình phát video YouTube"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
 
 - [The Graph Network Contracts](https://github.com/graphprotocol/contracts)
 - [Curation Contract](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - the underlying contract that the GNS wraps around
diff --git a/pages/vi/deploying/subgraph-studio.mdx b/pages/vi/deploying/subgraph-studio.mdx
index 49d082b4fd2f..8df46841dbfb 100644
--- a/pages/vi/deploying/subgraph-studio.mdx
+++ b/pages/vi/deploying/subgraph-studio.mdx
@@ -2,6 +2,8 @@
 title: How to Use the Subgraph Studio
 ---
 
+import { Video } from '@/components'
+
 Welcome to your new launchpad 👩🏽‍🚀
 
 The Subgraph Studio is your place to build and create subgraphs, add metadata, and publish them to the new decentralized Explorer (more on that [here](/network/explorer)).
@@ -66,15 +68,7 @@ If you’d like to test your subgraph before publishing it to the network, you c
 
 You’ve made it this far - congrats! Publishing your subgraph means that an IPFS hash was generated when you deployed the subgraph within the CLI and is stored in the network’s Ethereum smart contracts. In order to publish your subgraph successfully, you’ll need to go through the following steps outlined in this [blog](https://thegraph.com/blog/building-with-subgraph-studio). Check out the video overview below as well:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/HfDgC2oNnwo"
-    title="Trình phát video YouTube"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/HfDgC2oNnwo" />
 
 Remember, while you’re going through your publishing flow, you’ll be able to push to either mainnet or Rinkeby, the testnet we support. If you’re a first time subgraph developer, we highly suggest you start with publishing to Rinkeby, which is free to do. This will allow you to see how the subgraph will work in The Graph Explorer and will allow you to test curation elements.
 
diff --git a/pages/vi/network/curating.mdx b/pages/vi/network/curating.mdx
index d09a99a70d47..158db0077147 100644
--- a/pages/vi/network/curating.mdx
+++ b/pages/vi/network/curating.mdx
@@ -2,6 +2,8 @@
 title: Curator
 ---
 
+import { Video } from '@/components'
+
 Curators rất quan trọng đối với nền kinh tế phi tập trung The Graph. Họ sử dụng kiến thức của mình về hệ sinh thái web3 để đánh giá và báo hiệu trên các subgraph cần được lập chỉ mục bởi Mạng The Graph. Thông qua Explorer, curator có thể xem dữ liệu mạng để đưa ra quyết định báo hiệu. Mạng The Graph thưởng cho những curator báo hiệu trên các subgraph chất lượng tốt sẽ kiếm được một phần phí truy vấn mà các subgraph tạo ra. Curator được khuyến khích về mặt kinh tế để phát tín hiệu sớm. Những tín hiệu này từ curator rất quan trọng đối với Indexer, những người này sau đó có thể xử lý hoặc lập chỉ mục dữ liệu từ các subgraph được báo hiệu này.
 
 Khi phát tín hiệu, người phụ trách có thể quyết định báo hiệu trên một phiên bản cụ thể của subgraph hoặc báo hiệu bằng tính năng tự động di chuyển. Khi báo hiệu bằng cách sử dụng tính năng tự động di chuyển, cổ phần của curator sẽ luôn được nâng cấp lên phiên bản mới nhất do nhà phát triển xuất bản. Nếu thay vào đó bạn quyết định báo hiệu trên một phiên bản cụ thể, cổ phần của bạn sẽ luôn ở trên phiên bản cụ thể này.
@@ -93,12 +95,4 @@ Cổ phần curation không thể được "mua" hoặc "bán" như các token E
 
 Vẫn còn thắc mắc? Xem video hướng dẫn Curation của chúng tôi bên dưới:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/VytTEcf0dxQ"
-    title="Trình phát video YouTube"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/VytTEcf0dxQ" />
diff --git a/pages/vi/network/delegating.mdx b/pages/vi/network/delegating.mdx
index 3d22f9f79b6c..9cf335fba31d 100644
--- a/pages/vi/network/delegating.mdx
+++ b/pages/vi/network/delegating.mdx
@@ -2,6 +2,8 @@
 title: Delegator
 ---
 
+import { Video } from '@/components'
+
 Delegator (Người ủy quyền) không bị phạt cắt tài sản (slash) vì hành vi xấu, nhưng có một khoản thuế đặt cọc đối với Delegator để ngăn cản việc đưa ra quyết định kém có thể làm tổn hại đến tính toàn vẹn của mạng.
 
 Hướng dẫn này sẽ giải thích cách trở thành delegator hiệu quả trong Mạng The Graph. Delegator chia sẻ thu nhập của giao thức cùng với tất cả những indexer trên cổ phần stake được ủy quyền của họ. Delegator phải sử dụng phán đoán tốt nhất của họ để chọn Indexer dựa trên nhiều yếu tố. Xin lưu ý rằng hướng dẫn này sẽ không bao gồm các bước như thiết lập Metamask đúng cách, vì thông tin đó có sẵn rộng rãi trên internet. Có ba phần trong hướng dẫn này:
@@ -95,12 +97,4 @@ At times, attempts to delegate to indexers via MetaMask can fail and result in p
 
 This guide provides a full review of this document, and how to consider everything in this document while interacting with the UI.
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/2G7S2gdURdc"
-    title="YouTube video player"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/2G7S2gdURdc" />
diff --git a/pages/vi/network/explorer.mdx b/pages/vi/network/explorer.mdx
index 301f36468524..b2347a80ce35 100644
--- a/pages/vi/network/explorer.mdx
+++ b/pages/vi/network/explorer.mdx
@@ -2,17 +2,11 @@
 title: Trình khám phá Graph
 ---
 
+import { Video } from '@/components'
+
 Chào mừng bạn đến với Graph Explorer, hay như chúng tôi thường gọi, cổng thông tin phi tập trung của bạn vào thế giới subgraphs và dữ liệu mạng. 👩🏽‍🚀 Graph Explorer bao gồm nhiều phần để bạn có thể tương tác với các nhà phát triển subgraph khác, nhà phát triển dapp, Curators, Indexers, và Delegators. Để biết tổng quan chung về Graph Explorer, hãy xem video bên dưới (hoặc tiếp tục đọc bên dưới):
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/u224xf7rEBY"
-    title="Trình phát video YouTube"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/u224xf7rEBY" />
 
 ## Subgraphs
 
diff --git a/pages/vi/querying/billing.mdx b/pages/vi/querying/billing.mdx
index 8e98e0996567..4c07de7a62bb 100644
--- a/pages/vi/querying/billing.mdx
+++ b/pages/vi/querying/billing.mdx
@@ -2,6 +2,8 @@
 title: Billing on the Subgraph Studio
 ---
 
+import { Video } from '@/components'
+
 ### Tổng quan
 
 Invoices are statements of payment amounts owed by a customer and are typically generated on a weekly basis in the system. You’ll be required to pay fees based on the query fees you generate using your API keys. The billing contract lives on the [Polygon](https://polygon.technology/) network. It’ll allow you to:
@@ -39,15 +41,7 @@ There are 4 states your invoice can be in:
 
 For a quick demo of how billing works on the Subgraph Studio, check out the video below:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/UrfIpm-Vlgs"
-    title="Trình phát video YouTube"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
 
 ### Multisig Users
 
diff --git a/pages/zh/cookbook/migrating-a-subgraph.mdx b/pages/zh/cookbook/migrating-a-subgraph.mdx
index 6187ba11b6bb..b79a86ccbd5b 100644
--- a/pages/zh/cookbook/migrating-a-subgraph.mdx
+++ b/pages/zh/cookbook/migrating-a-subgraph.mdx
@@ -2,6 +2,8 @@
 title: 将现有子图迁移到Graph网络
 ---
 
+import { Video } from '@/components'
+
 ## 介绍
 
 这是有关如何将子图从托管服务迁移到图网络的指南。 对于 Opyn、UMA、mStable、Audius、PoolTogether、Livepeer、RAI、Enzyme、DODO、Opyn、Pickle 和 BadgerDAO 等项目，向 The Graph Network 的迁移已经成功，所有这些项目都依赖于网络上索引器提供的数据。 The Graph Network 上现在有 200 多个子图，产生查询费用并积极索引 web3 数据。
@@ -147,15 +149,7 @@ _虽然这种机制目前在网络上运行，但社区目前正在讨论降低
 
 如果您仍然感到困惑，请不要害怕！ 查看以下资源或观看我们的视频指南，了解将子图迁移到下面的去中心化网络：
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/CzdQ3dFFrjo"
-    title="YouTube video player"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
 
 - [The Graph 网络合约](https://github.com/graphprotocol/contracts)
 - [Curation Contract](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - GNS 包裹的底层合约
diff --git a/pages/zh/deploying/subgraph-studio.mdx b/pages/zh/deploying/subgraph-studio.mdx
index 393914ac23fa..6a56a989c68d 100644
--- a/pages/zh/deploying/subgraph-studio.mdx
+++ b/pages/zh/deploying/subgraph-studio.mdx
@@ -2,6 +2,8 @@
 title: 如何使用子图工作室
 ---
 
+import { Video } from '@/components'
+
 欢迎使用您的新启动板 👩🏽‍🚀
 
 Subgraph Studio 是您构建和创建子图、添加元数据并将其发布到新的分散式资源管理器的地方（更多关于[这里](/network/explorer)）。
@@ -66,15 +68,7 @@ The Graph 网络还不能支持所有的数据源和 托管服务上可用的功
 
 你已经做到了这一点 - 恭喜！ 发布子图意味着当您在 CLI 中部署子图时会生成 IPFS 哈希，并存储在网络的以太坊智能合约中。 为了成功发布您的子图，您需要完成此[博客](https://thegraph.com/blog/building-with-subgraph-studio)中列出的以下步骤. 还请查看下面的视频概述：
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/HfDgC2oNnwo"
-    title="YouTube video player"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/HfDgC2oNnwo" />
 
 请记住，在您完成发布流程时，您将能够推送到我们支持的测试网主网或 Rinkeby。 如果您是第一次开发子图，我们强烈建议您从发布到 Rinkeby 开始，这是免费的。 这将允许您查看子图在 The Graph Explorer 中的工作方式，并允许您测试管理元素。
 
diff --git a/pages/zh/network/curating.mdx b/pages/zh/network/curating.mdx
index 262ef3df5c82..e2602ce07d23 100644
--- a/pages/zh/network/curating.mdx
+++ b/pages/zh/network/curating.mdx
@@ -2,6 +2,8 @@
 title: 策展
 ---
 
+import { Video } from '@/components'
+
 策展人对于 The Graph 去中心化的经济至关重要。 他们利用自己对 web3 生态系统的了解，对应该被 The Graph 网络索引的子图进行评估并发出信号。 通过资源管理器，策展人能够查看网络数据以做出信号决定。 The Graph 网络对那些在优质子图上发出信号的策展人给予奖励，并从子图产生的查询费中分得一部分。 在经济上，策展人被激励着尽早发出信号。 这些来自策展人的线索对索引人来说非常重要，他们可以对这些发出信号的子图进行处理或索引。
 
 在发出信号时，策展人可以决定在子图的一个特定版本上发出信号，或者使用自动迁移发出信号。 当使用自动迁移发出信号时，策展人的份额将始终升级到由开发商发布的最新版本。 如果你决定在一个特定的版本上发出信号，股份将始终保持在这个特定的版本上。
@@ -93,12 +95,4 @@ Remember that curation is risky. 请做好你的工作，确保你在你信任
 
 还有困惑吗？ 点击下面查看策展视频指导：
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/VytTEcf0dxQ"
-    title="YouTube video player"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/VytTEcf0dxQ" />
diff --git a/pages/zh/network/delegating.mdx b/pages/zh/network/delegating.mdx
index 3ea372d4c4d1..01f9e8836030 100644
--- a/pages/zh/network/delegating.mdx
+++ b/pages/zh/network/delegating.mdx
@@ -2,6 +2,8 @@
 title: 委托人
 ---
 
+import { Video } from '@/components'
+
 委托人不能因为不良行为而被取消，但对委托有存款税，以抑制可能损害网络完整性的不良决策。
 
 本指南将解释如何在 Graph 网络中成为一个有效的委托人。 委托人与所有索引人一起分享其委托股权的协议收益。 委托人必须根据多种因素，运用他们的最佳判断力来选择索引人。 请注意，本指南将不涉及正确设置 Metamask 等步骤，因为这些信息在互联网上广泛存在。 本指南有三个部分：
@@ -91,12 +93,4 @@ At times, attempts to delegate to indexers via MetaMask can fail and result in p
 
 This guide provides a full review of this document, and how to consider everything in this document while interacting with the UI.
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/2G7S2gdURdc"
-    title="YouTube video player"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/2G7S2gdURdc" />
diff --git a/pages/zh/network/explorer.mdx b/pages/zh/network/explorer.mdx
index 6de4592fec35..d60df7f567fa 100644
--- a/pages/zh/network/explorer.mdx
+++ b/pages/zh/network/explorer.mdx
@@ -2,17 +2,11 @@
 title: 浏览器
 ---
 
+import { Video } from '@/components'
+
 欢迎使用 Graph 浏览器，或者我们可以称它为您进入子图和网络数据世界的去中心化门户。 The Graph 浏览器由多个部分组成，您可以在其中与其他子图开发人员、去中心化应用开发人员、策展人、索引人和 委托人进行交互。 有关 Graph 浏览器的通用概述，请查看下面的视频（或继续阅读下面的内容）：
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/u224xf7rEBY"
-    title="YouTube video player"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/u224xf7rEBY" />
 
 ## 子图
 
diff --git a/pages/zh/querying/billing.mdx b/pages/zh/querying/billing.mdx
index cd0a7ff142e0..6e629b965cb6 100644
--- a/pages/zh/querying/billing.mdx
+++ b/pages/zh/querying/billing.mdx
@@ -2,6 +2,8 @@
 title: 子图工作室的计费
 ---
 
+import { Video } from '@/components'
+
 ### 概述
 
 发票是客户所欠付款金额的报表，通常在系统中每周生成一次。 你需要根据你使用 API 密钥产生的查询费用来支付费用。 账单合同在[Polygon](https://polygon.technology/)网络上。 它将允许你：
@@ -39,15 +41,7 @@ title: 子图工作室的计费
 
 关于在 Subgraph Studio 上如何进行计费的快速演示，请看下面的视频。
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/UrfIpm-Vlgs"
-    title="YouTube video player"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<Video src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
 
 ### 多重签名用户
 

From 2993dc81ae840d64cb7547690c1ccc347354404d Mon Sep 17 00:00:00 2001
From: Alexandria Roberts <iamlexieonearth@gmail.com>
Date: Fri, 5 Aug 2022 16:18:21 +0800
Subject: [PATCH 2/5] fixed an error with video component

---
 layout/MDXLayout.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/layout/MDXLayout.tsx b/layout/MDXLayout.tsx
index 2002afa5d936..2ba89e4e1d52 100644
--- a/layout/MDXLayout.tsx
+++ b/layout/MDXLayout.tsx
@@ -26,7 +26,6 @@ import {
   ListUnordered,
   Paragraph,
   Table,
-  Video,
 } from '@/components'
 import { useI18n } from '@/i18n'
 import { NavItemGroup } from '@/navigation'
@@ -48,7 +47,6 @@ const mdxComponents = {
   ul: ListUnordered,
   p: Paragraph,
   table: Table,
-  video: Video,
 }
 
 const mdxStyles = {

From 3b95bc5d6beb61ed11de3d469b05b227460aadbf Mon Sep 17 00:00:00 2001
From: Alexandria Roberts <iamlexieonearth@gmail.com>
Date: Sat, 6 Aug 2022 09:49:14 +0800
Subject: [PATCH 3/5] Added Vieo and difficult to MDXLayout file and updated
 Video name

---
 components/Video.tsx                       | 16 ----------------
 components/VideoEmbed.tsx                  | 11 +++++++++++
 components/index.ts                        |  2 +-
 layout/MDXLayout.tsx                       |  4 ++++
 pages/ar/cookbook/migrating-a-subgraph.mdx |  4 +---
 pages/ar/deploying/subgraph-studio.mdx     |  4 +---
 pages/ar/network/curating.mdx              |  4 +---
 pages/ar/network/delegating.mdx            |  4 +---
 pages/ar/network/explorer.mdx              |  4 +---
 pages/ar/network/indexing.mdx              |  2 --
 pages/ar/querying/billing.mdx              |  4 +---
 pages/en/cookbook/migrating-a-subgraph.mdx |  4 +---
 pages/en/deploying/subgraph-studio.mdx     |  4 +---
 pages/en/network/curating.mdx              |  4 +---
 pages/en/network/delegating.mdx            |  4 +---
 pages/en/network/explorer.mdx              |  4 +---
 pages/en/network/indexing.mdx              |  2 --
 pages/en/querying/billing.mdx              |  4 +---
 pages/es/cookbook/migrating-a-subgraph.mdx |  4 +---
 pages/es/deploying/subgraph-studio.mdx     |  4 +---
 pages/es/network/curating.mdx              |  4 +---
 pages/es/network/delegating.mdx            |  4 +---
 pages/es/network/explorer.mdx              |  4 +---
 pages/es/network/indexing.mdx              |  2 --
 pages/es/querying/billing.mdx              |  4 +---
 pages/ja/cookbook/migrating-a-subgraph.mdx |  4 +---
 pages/ja/deploying/subgraph-studio.mdx     |  4 +---
 pages/ja/network/curating.mdx              |  4 +---
 pages/ja/network/delegating.mdx            |  4 +---
 pages/ja/network/explorer.mdx              |  4 +---
 pages/ja/network/indexing.mdx              |  2 --
 pages/ja/querying/billing.mdx              |  4 +---
 pages/ko/cookbook/migrating-a-subgraph.mdx |  4 +---
 pages/ko/deploying/subgraph-studio.mdx     |  4 +---
 pages/ko/network/curating.mdx              |  4 +---
 pages/ko/network/delegating.mdx            |  4 +---
 pages/ko/network/explorer.mdx              |  4 +---
 pages/ko/network/indexing.mdx              |  2 --
 pages/ko/querying/billing.mdx              |  4 +---
 pages/vi/cookbook/migrating-a-subgraph.mdx |  4 +---
 pages/vi/deploying/subgraph-studio.mdx     |  4 +---
 pages/vi/network/curating.mdx              |  4 +---
 pages/vi/network/delegating.mdx            |  4 +---
 pages/vi/network/explorer.mdx              |  4 +---
 pages/vi/network/indexing.mdx              |  2 --
 pages/vi/querying/billing.mdx              |  4 +---
 pages/zh/cookbook/migrating-a-subgraph.mdx |  4 +---
 pages/zh/deploying/subgraph-studio.mdx     |  4 +---
 pages/zh/network/curating.mdx              |  4 +---
 pages/zh/network/delegating.mdx            |  4 +---
 pages/zh/network/explorer.mdx              |  4 +---
 pages/zh/network/indexing.mdx              |  2 --
 pages/zh/querying/billing.mdx              |  4 +---
 53 files changed, 58 insertions(+), 157 deletions(-)
 delete mode 100644 components/Video.tsx
 create mode 100644 components/VideoEmbed.tsx

diff --git a/components/Video.tsx b/components/Video.tsx
deleted file mode 100644
index cb6d1525793d..000000000000
--- a/components/Video.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { HTMLAttributes } from 'react'
-
-export type VideoProps = { src: string } & HTMLAttributes<HTMLVideoElement>
-
-export const Video = ({ src, ...props }: VideoProps) => {
-  return (
-    <figure sx={{ paddingBottom: `${100 / (16 / 9)}%` }} {...props}>
-      <iframe
-        src={src}
-        frameBorder="0"
-        allowFullScreen
-        sx={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%' }}
-      />
-    </figure>
-  )
-}
diff --git a/components/VideoEmbed.tsx b/components/VideoEmbed.tsx
new file mode 100644
index 000000000000..4d3521c6e50b
--- /dev/null
+++ b/components/VideoEmbed.tsx
@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'react'
+
+export type VideoProps = { src: string } & HTMLAttributes<HTMLElement>
+
+export const VideoEmbed = ({ src, ...props }: VideoProps) => {
+  return (
+    <figure sx={{ paddingBottom: `${100 / (16 / 9)}%` }} {...props}>
+      <iframe src={src} allowFullScreen sx={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%' }} />
+    </figure>
+  )
+}
diff --git a/components/index.ts b/components/index.ts
index 6f82a61c90e3..fd347285df97 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -10,4 +10,4 @@ export * from './List'
 export * from './NavTree'
 export * from './Paragraph'
 export * from './Table'
-export * from './Video'
+export * from './VideoEmbed'
diff --git a/layout/MDXLayout.tsx b/layout/MDXLayout.tsx
index 2ba89e4e1d52..7d0b3dcce640 100644
--- a/layout/MDXLayout.tsx
+++ b/layout/MDXLayout.tsx
@@ -26,6 +26,8 @@ import {
   ListUnordered,
   Paragraph,
   Table,
+  VideoEmbed,
+  Difficulty,
 } from '@/components'
 import { useI18n } from '@/i18n'
 import { NavItemGroup } from '@/navigation'
@@ -47,6 +49,8 @@ const mdxComponents = {
   ul: ListUnordered,
   p: Paragraph,
   table: Table,
+  VideoEmbed,
+  Difficulty,
 }
 
 const mdxStyles = {
diff --git a/pages/ar/cookbook/migrating-a-subgraph.mdx b/pages/ar/cookbook/migrating-a-subgraph.mdx
index e06275687858..e507080f934a 100644
--- a/pages/ar/cookbook/migrating-a-subgraph.mdx
+++ b/pages/ar/cookbook/migrating-a-subgraph.mdx
@@ -2,8 +2,6 @@
 title: ترحيل Subgraph موجود إلى شبكة The Graph
 ---
 
-import { Video } from '@/components'
-
 ## مقدمة
 
 هذا دليل حول كيفية ترحيل الـ subgraph الخاص بك من Hosted Service إلى شبكة The Graph. لقد نجح الترحيل إلى شبكة The Graph لمشاريع مثل Opyn و UMA و mStable و Audius و PoolTogether و Livepeer و RAI و Enzyme و DODO و Opyn و Pickle و BadgerDAO ، وكلها تعتمد على البيانات التي يقدمها المفهرسون على الشبكة. ويوجد الآن أكثر من 200 subgraphs حي على شبكة The Graph، مولدة بذلك رسوم استعلام وفهرسة بيانات web3 بشكل نشط.
@@ -149,7 +147,7 @@ _بينما تتم هذه الآلية حاليا على الشبكة ، ينا
 
 إذا كنت لا تزال في حيرة من أمرك ، فلا تخف! راجع المصادر التالية أو شاهد الفيديو الخاص بنا حول ترحيل الـ subgraphs إلى الشبكة اللامركزية أدناه:
 
-<Video src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
+<VideoEmbed src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
 
 - [عقود شبكة The Graph](https://github.com/graphprotocol/contracts)
 - [ عقد التنسيق](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - العقد الأساسي الذي تلتف حوله GNS
diff --git a/pages/ar/deploying/subgraph-studio.mdx b/pages/ar/deploying/subgraph-studio.mdx
index 3ed351ff066f..a9670e1af1a7 100644
--- a/pages/ar/deploying/subgraph-studio.mdx
+++ b/pages/ar/deploying/subgraph-studio.mdx
@@ -2,8 +2,6 @@
 title: كيفية استخدام Subgraph Studio
 ---
 
-import { Video } from '@/components'
-
 مرحبًا بك في منصة الاطلاق الجديدة الخاصة بك 👩🏽‍🚀
 
 يعد Subgraph Studio مكانك لبناء وإنشاء الـ subgraphs وإضافة البيانات الوصفية (metadata) ونشرها على المستكشف(Explorer) اللامركزي الجديد (المزيد حول هذا [ هنا ](/network/explorer)).
@@ -68,7 +66,7 @@ import { Video } from '@/components'
 
 لقد نجحت في الوصول إلى هذا الحد - تهانينا! نشر الـ subgraph يعني أنه تم إنشاء IPFS hash عند نشرك لـ subgraph ضمن CLI وتخزينه في عقود Ethereum الذكية للشبكة. ولنشر الـ subgraph الخاص بك بنجاح ، ستحتاج إلى اتباع الخطوات التالية الموجزة في هذه [ المدونة ](https://thegraph.com/blog/building-with-subgraph-studio). راجع الفيديو أدناه أيضًا:
 
-<Video src="https://www.youtube.com/embed/HfDgC2oNnwo" />
+<VideoEmbed src="https://www.youtube.com/embed/HfDgC2oNnwo" />
 
 تذكر ، أثناء تقدمك في تدفق النشر ، ستتمكن من الدفع(push) إما إلى mainnet أو Rinkeby ، وهي testnet التي ندعمها. إذا كنت مطور subgraph لأول مرة ، فنحن نقترح بشدة أن تبدأ بالنشر على Rinkeby ، وهو مجاني. سيسمح لك ذلك بمعرفة كيفية عمل الـ subgraph في The Graph Explorer وسيسمح لك باختبار عناصر التنسيق.
 
diff --git a/pages/ar/network/curating.mdx b/pages/ar/network/curating.mdx
index a22a6397cf4e..a0d5c6a19b91 100644
--- a/pages/ar/network/curating.mdx
+++ b/pages/ar/network/curating.mdx
@@ -2,8 +2,6 @@
 title: (التنسيق) curating
 ---
 
-import { Video } from '@/components'
-
 المنسقون مهمون للاقتصاد اللامركزي في the Graph. يستخدمون معرفتهم بالنظام البيئي web3 للتقييم والإشارة ل Subgraphs والتي تفهرس بواسطة شبكة The Graph. من خلال المستكشف (Explorer)، يستطيع المنسقون (curators) عرض بيانات الشبكة وذلك لاتخاذ قرارات الإشارة. تقوم شبكة The Graph بمكافئة المنسقين الذين يشيرون إلى ال Subgraphs عالية الجودة بحصة من رسوم الاستعلام التي تولدها ال subgraphs. يتم تحفيز المنسقون(Curators) ليقومون بالإشارة بشكل مبكر. هذه الإشارات من المنسقين مهمة للمفهرسين ، والذين يمكنهم بعد ذلك معالجة أو فهرسة البيانات من ال subgraphs المشار إليها.
 
 يمكن للمنسقين اتخاذ القرار إما بالإشارة إلى إصدار معين من Subgraphs أو الإشارة باستخدام الترحيل التلقائي auto-migrate. عند الإشارة باستخدام الترحيل التلقائي ، ستتم دائما ترقية حصص المنسق إلى أحدث إصدار ينشره المطور. وإذا قررت الإشارة إلى إصدار معين، فستظل الحصص دائما في هذا الإصدار المحدد.
@@ -95,4 +93,4 @@ import { Video } from '@/components'
 
 لازلت مشوشا؟ راجع فيديو دليل التنسيق أدناه:
 
-<Video src="https://www.youtube.com/embed/VytTEcf0dxQ" />
+<VideoEmbed src="https://www.youtube.com/embed/VytTEcf0dxQ" />
diff --git a/pages/ar/network/delegating.mdx b/pages/ar/network/delegating.mdx
index 5a223a56b404..6d5bfa82fe00 100644
--- a/pages/ar/network/delegating.mdx
+++ b/pages/ar/network/delegating.mdx
@@ -2,8 +2,6 @@
 title: المفوض(Delegator)
 ---
 
-import { Video } from '@/components'
-
 لا يمكن شطب المفوضين بسبب السلوك السيئ ، ولكن هناك ضريبة ودائع على المفوضين لتثبيط اتخاذ القرار السيئ الذي قد يضر بسلامة الشبكة.
 
 سيشرح هذا الدليل كيف تكون مفوضا فعالا في Graph Network. يشارك المفوضون أرباح حصتهم المفوضة مع المفهرسين. يجب أن يستخدم المفوض أفضل حكم لديه لاختيار المفهرسين بناء على عوامل متعددة. يرجى ملاحظة أن هذا الدليل لن يتطرق لخطوات مثل إعداد Metamask ، حيث أن هذه المعلومات متاحة على نطاق واسع على الإنترنت. يوجد ثلاثة أقسام في هذا الدليل:
@@ -93,4 +91,4 @@ At times, attempts to delegate to indexers via MetaMask can fail and result in p
 
 This guide provides a full review of this document, and how to consider everything in this document while interacting with the UI.
 
-<Video src="https://www.youtube.com/embed/2G7S2gdURdc" />
+<VideoEmbed src="https://www.youtube.com/embed/2G7S2gdURdc" />
diff --git a/pages/ar/network/explorer.mdx b/pages/ar/network/explorer.mdx
index e13d1fc8c0f5..eec8a95889fc 100644
--- a/pages/ar/network/explorer.mdx
+++ b/pages/ar/network/explorer.mdx
@@ -2,11 +2,9 @@
 title: مستكشف
 ---
 
-import { Video } from '@/components'
-
 مرحبا بك في مستكشف Graph ، أو كما نحب أن نسميها ، بوابتك اللامركزية في عالم subgraphs وبيانات الشبكة. 👩🏽‍🚀 مستكشف TheGraph يتكون من عدة اجزاء حيث يمكنك التفاعل مع مطوري Subgraphs الاخرين ، ومطوري dApp ،والمنسقين والمفهرسين، والمفوضين. للحصول على نظرة عامة حول the Graph Explorer، راجع الفيديو أدناه (أو تابع القراءة أدناه):
 
-<Video src="https://www.youtube.com/embed/u224xf7rEBY" />
+<VideoEmbed src="https://www.youtube.com/embed/u224xf7rEBY" />
 
 ## Subgraphs
 
diff --git a/pages/ar/network/indexing.mdx b/pages/ar/network/indexing.mdx
index 9576b70c5641..aaa2c5f24602 100644
--- a/pages/ar/network/indexing.mdx
+++ b/pages/ar/network/indexing.mdx
@@ -2,8 +2,6 @@
 title: فهرسة (indexing)
 ---
 
-import { Difficulty } from '@/components'
-
 المفهرسون ( Indexers) هم مشغلي العقد (node) في شبكة TheGraph ويقومون ب staking لتوكن (GRT) من أجل توفير خدمات الفهرسة ( indexing) والاستعلام. المفهرسون(Indexers) يحصلون على رسوم الاستعلام ومكافآت الفهرسة وذلك مقابل خدماتهم. وأيضا يكسبون من مجموعة الخصومات (Rebate Pool) والتي تتم مشاركتها مع جميع المساهمين في الشبكة بما يتناسب مع عملهم ، وفقا ل Cobbs-Douglas Rebate Function.
 
 يخضع GRT المخزن في البروتوكول لفترة إذابة thawing period وقد يتم شطبه إذا كان المفهرسون ضارون ويقدمون بيانات غير صحيحة للتطبيقات أو إذا قاموا بالفهرسة بشكل غير صحيح. المفهرسون يتم تفويضهم من قبل المفوضين وذلك للمساهمه في الشبكة.
diff --git a/pages/ar/querying/billing.mdx b/pages/ar/querying/billing.mdx
index ef4cf3b5299e..12681e85d783 100644
--- a/pages/ar/querying/billing.mdx
+++ b/pages/ar/querying/billing.mdx
@@ -2,8 +2,6 @@
 title: الفوترة على Subgraph Studio
 ---
 
-import { Video } from '@/components'
-
 ### نظره عامة
 
 الفواتير هي كشوفات بمبالغ السداد المستحقة على العميل ويتم إنشاؤها عادةً على أساس أسبوعي في النظام. سيُطلب منك دفع الرسوم بناءً على رسوم الاستعلام التي تنشئها باستخدام مفاتيح API الخاصة بك. يسري عقد الفوترة على شبكة [ Polygon ](https://polygon.technology/). وسيسمح لك بما يلي:
@@ -41,7 +39,7 @@ import { Video } from '@/components'
 
 للحصول على عرض توضيحي سريع لكيفية عمل الفوترة في Subgraph Studio ، راجع الفيديو أدناه:
 
-<Video src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
+<VideoEmbed src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
 
 ### مستخدمو Multisig
 
diff --git a/pages/en/cookbook/migrating-a-subgraph.mdx b/pages/en/cookbook/migrating-a-subgraph.mdx
index e0af03e6c75f..35525ee98ddf 100644
--- a/pages/en/cookbook/migrating-a-subgraph.mdx
+++ b/pages/en/cookbook/migrating-a-subgraph.mdx
@@ -2,8 +2,6 @@
 title: Migrating an Existing Subgraph to The Graph Network
 ---
 
-import { Video } from '@/components'
-
 ## Introduction
 
 This is a guide on how to migrate your subgraph from the Hosted Service to The Graph Network. The migration to The Graph Network has been successful for projects like Opyn, UMA, mStable, Audius, PoolTogether, Livepeer, RAI, Enzyme, DODO, Opyn, Pickle, and BadgerDAO all of which are relying on data served by Indexers on the network. There are now over 200 subgraphs live on The Graph Network, generating query fees and actively indexing web3 data.
@@ -149,7 +147,7 @@ Remember that it's a dynamic and growing market, but how you interact with it is
 
 If you're still confused, fear not! Check out the following resources or watch our video guide on migrating subgraphs to the decentralized network below:
 
-<Video src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
+<VideoEmbed src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
 
 - [The Graph Network Contracts](https://github.com/graphprotocol/contracts)
 - [Curation Contract](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - the underlying contract that the GNS wraps around
diff --git a/pages/en/deploying/subgraph-studio.mdx b/pages/en/deploying/subgraph-studio.mdx
index 96775695709b..3b6e08c5fca5 100644
--- a/pages/en/deploying/subgraph-studio.mdx
+++ b/pages/en/deploying/subgraph-studio.mdx
@@ -2,8 +2,6 @@
 title: How to Use the Subgraph Studio
 ---
 
-import { Video } from '@/components'
-
 Welcome to your new launchpad 👩🏽‍🚀
 
 The Subgraph Studio is your place to build and create subgraphs, add metadata, and publish them to the new decentralized Explorer (more on that [here](/network/explorer)).
@@ -68,7 +66,7 @@ If you’d like to test your subgraph before publishing it to the network, you c
 
 You’ve made it this far - congrats! Publishing your subgraph means that an IPFS hash was generated when you deployed the subgraph within the CLI and is stored in the network’s Ethereum smart contracts. In order to publish your subgraph successfully, you’ll need to go through the following steps outlined in this [blog](https://thegraph.com/blog/building-with-subgraph-studio). Check out the video overview below as well:
 
-<Video src="https://www.youtube.com/embed/HfDgC2oNnwo" />
+<VideoEmbed src="https://www.youtube.com/embed/HfDgC2oNnwo" />
 
 Remember, while you’re going through your publishing flow, you’ll be able to push to either mainnet or Rinkeby, the testnet we support. If you’re a first-time subgraph developer, we highly suggest you start with publishing to Rinkeby, which is free to do. This will allow you to see how the subgraph will work in The Graph Explorer and will allow you to test curation elements.
 
diff --git a/pages/en/network/curating.mdx b/pages/en/network/curating.mdx
index 7cc08894d9e4..8f580e00c893 100644
--- a/pages/en/network/curating.mdx
+++ b/pages/en/network/curating.mdx
@@ -2,8 +2,6 @@
 title: Curating
 ---
 
-import { Video } from '@/components'
-
 Curators are critical to the Graph decentralized economy. They use their knowledge of the web3 ecosystem to assess and signal on the subgraphs that should be indexed by The Graph Network. Through the Explorer, curators are able to view network data to make signaling decisions. The Graph Network rewards curators who signal on good quality subgraphs with a share of the query fees that subgraphs generate. Curators are economically incentivized to signal early. These cues from curators are important for Indexers, who can then process or index the data from these signaled subgraphs.
 
 When signaling, curators can decide to signal on a specific version of the subgraph or to signal using auto-migrate. When signaling using auto-migrate, a curator’s shares will always be upgraded to the latest version published by the developer. If you decide to signal on a specific version instead, shares will always stay on this specific version.
@@ -95,4 +93,4 @@ Curation shares cannot be "bought" or "sold" like other ERC20 tokens that you ma
 
 Still confused? Check out our Curation video guide below:
 
-<Video src="https://www.youtube.com/embed/VytTEcf0dxQ" />
+<VideoEmbed src="https://www.youtube.com/embed/VytTEcf0dxQ" />
diff --git a/pages/en/network/delegating.mdx b/pages/en/network/delegating.mdx
index 5098c1e767e5..c7d764530762 100644
--- a/pages/en/network/delegating.mdx
+++ b/pages/en/network/delegating.mdx
@@ -2,8 +2,6 @@
 title: Delegating
 ---
 
-import { Video } from '@/components'
-
 Delegators are network participants who delegate (i.e., "stake") GRT to one or more Indexers. Delegators contribute to securing the network without running a Graph Node themselves.
 
 By delegating to an Indexer, Delegators earn a portion of the Indexer's query fees and rewards. The amount of queries an Indexer can process depends on the Indexer's own (and delegated) stake and the price the Indexer charges for each query, so the more stake that is allocated to an Indexer, the more potential queries they can process.
@@ -97,4 +95,4 @@ At times, attempts to delegate to indexers via MetaMask can fail and result in p
 
 This guide provides a full review of this document, and how to consider everything in this document while interacting with the UI.
 
-<Video src="https://www.youtube.com/embed/2G7S2gdURdc" />
+<VideoEmbed src="https://www.youtube.com/embed/2G7S2gdURdc" />
diff --git a/pages/en/network/explorer.mdx b/pages/en/network/explorer.mdx
index 59d3581aca25..5ec256c89b34 100644
--- a/pages/en/network/explorer.mdx
+++ b/pages/en/network/explorer.mdx
@@ -2,11 +2,9 @@
 title: Graph Explorer
 ---
 
-import { Video } from '@/components'
-
 Welcome to the Graph Explorer, or as we like to call it, your decentralized portal into the world of subgraphs and network data. 👩🏽‍🚀 The Graph Explorer consists of multiple parts where you can interact with other subgraph developers, dapp developers, Curators, Indexers, and Delegators. For a general overview of the Graph Explorer, check out the video below (or keep reading below):
 
-<Video src="https://www.youtube.com/embed/u224xf7rEBY" />
+<VideoEmbed src="https://www.youtube.com/embed/u224xf7rEBY" />
 
 ## Subgraphs
 
diff --git a/pages/en/network/indexing.mdx b/pages/en/network/indexing.mdx
index c3aef9943bc7..e8aeaa7e881f 100644
--- a/pages/en/network/indexing.mdx
+++ b/pages/en/network/indexing.mdx
@@ -2,8 +2,6 @@
 title: Indexing
 ---
 
-import { Difficulty } from '@/components'
-
 Indexers are node operators in The Graph Network that stake Graph Tokens (GRT) in order to provide indexing and query processing services. Indexers earn query fees and indexing rewards for their services. They also earn from a Rebate Pool that is shared with all network contributors proportional to their work, following the Cobbs-Douglas Rebate Function.
 
 GRT that is staked in the protocol is subject to a thawing period and can be slashed if Indexers are malicious and serve incorrect data to applications or if they index incorrectly. Indexers can also be delegated stake from Delegators, to contribute to the network.
diff --git a/pages/en/querying/billing.mdx b/pages/en/querying/billing.mdx
index d5561a87dc27..33fd5d4a057f 100644
--- a/pages/en/querying/billing.mdx
+++ b/pages/en/querying/billing.mdx
@@ -2,8 +2,6 @@
 title: Billing on the Subgraph Studio
 ---
 
-import { Video } from '@/components'
-
 ### Overview
 
 Invoices are statements of payment amounts owed by a customer and are typically generated on a weekly basis in the system. You’ll be required to pay fees based on the query fees you generate using your API keys. The billing contract lives on the [Polygon](https://polygon.technology/) network. It’ll allow you to:
@@ -41,7 +39,7 @@ There are 4 states your invoice can be in:
 
 For a quick demo of how billing works on the Subgraph Studio, check out the video below:
 
-<Video src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
+<VideoEmbed src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
 
 ### Multisig Users
 
diff --git a/pages/es/cookbook/migrating-a-subgraph.mdx b/pages/es/cookbook/migrating-a-subgraph.mdx
index 70c7c0c47e5b..d3e9872528c9 100644
--- a/pages/es/cookbook/migrating-a-subgraph.mdx
+++ b/pages/es/cookbook/migrating-a-subgraph.mdx
@@ -2,8 +2,6 @@
 title: Migrating an Existing Subgraph to The Graph Network
 ---
 
-import { Video } from '@/components'
-
 ## Introducción
 
 This is a guide on how to migrate your subgraph from the Hosted Service to The Graph Network. The migration to The Graph Network has been successful for projects like Opyn, UMA, mStable, Audius, PoolTogether, Livepeer, RAI, Enzyme, DODO, Opyn, Pickle, and BadgerDAO all of which are relying on data served by Indexers on the network. There are now over 200 subgraphs live on The Graph Network, generating query fees and actively indexing web3 data.
@@ -149,7 +147,7 @@ Remember that it's a dynamic and growing market, but how you interact with it is
 
 If you're still confused, fear not! Check out the following resources or watch our video guide on migrating subgraphs to the decentralized network below:
 
-<Video src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
+<VideoEmbed src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
 
 - [The Graph Network Contracts](https://github.com/graphprotocol/contracts)
 - [Curation Contract](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - the underlying contract that the GNS wraps around
diff --git a/pages/es/deploying/subgraph-studio.mdx b/pages/es/deploying/subgraph-studio.mdx
index d89306becd82..7c11aaf019a5 100644
--- a/pages/es/deploying/subgraph-studio.mdx
+++ b/pages/es/deploying/subgraph-studio.mdx
@@ -2,8 +2,6 @@
 title: How to Use the Subgraph Studio
 ---
 
-import { Video } from '@/components'
-
 Welcome to your new launchpad 👩🏽‍🚀
 
 The Subgraph Studio is your place to build and create subgraphs, add metadata, and publish them to the new decentralized Explorer (more on that [here](/network/explorer)).
@@ -68,7 +66,7 @@ If you’d like to test your subgraph before publishing it to the network, you c
 
 You’ve made it this far - congrats! Publishing your subgraph means that an IPFS hash was generated when you deployed the subgraph within the CLI and is stored in the network’s Ethereum smart contracts. In order to publish your subgraph successfully, you’ll need to go through the following steps outlined in this [blog](https://thegraph.com/blog/building-with-subgraph-studio). Check out the video overview below as well:
 
-<Video src="https://www.youtube.com/embed/HfDgC2oNnwo" />
+<VideoEmbed src="https://www.youtube.com/embed/HfDgC2oNnwo" />
 
 Remember, while you’re going through your publishing flow, you’ll be able to push to either mainnet or Rinkeby, the testnet we support. If you’re a first time subgraph developer, we highly suggest you start with publishing to Rinkeby, which is free to do. This will allow you to see how the subgraph will work in The Graph Explorer and will allow you to test curation elements.
 
diff --git a/pages/es/network/curating.mdx b/pages/es/network/curating.mdx
index a7f2f7ab2245..270ca1b3befb 100644
--- a/pages/es/network/curating.mdx
+++ b/pages/es/network/curating.mdx
@@ -2,8 +2,6 @@
 title: curación
 ---
 
-import { Video } from '@/components'
-
 Los curadores son vitales para la economía descentralizada que conforma a The Graph. Ellos utilizan su conocimiento sobre el ecosistema Web3 para calificar y señalar los subgrafos que deben ser indexados en la red de The Graph. A través del explorador, los curadores pueden ver los datos de la red y tomar decisiones sobre la señalización. The Graph Network recompensa a los curadores que señalan subgrafos valiosos para la red ya que ganan una parte de las tarifas de consulta que generan los subgrafos. Los curadores están motivados económicamente a través de la señalización rápida de dichos subgrafos. Estas señales de los curadores son importantes para los Indexadores, quienes luego pueden procesar o indexar los datos de estos subgrafos señalados.
 
 Al señalar, los curadores pueden decidir entre señalar en una versión específica del subgrafo o hacerlo usando la opción de auto migración. Cuando se señala mediante la auto migración, las acciones de un curador siempre se actualizarán a la última versión publicada por el desarrollador. Si, en cambio, decides señalar una versión específica, las acciones siempre permanecerán en esa versión específica.
@@ -95,4 +93,4 @@ Las participaciones de un curador no se pueden "comprar" o "vender" como otros t
 
 ¿Sigues confundido? Te invitamos a echarle un vistazo a nuestra guía en un vídeo que aborda todo sobre la curación:
 
-<Video src="https://www.youtube.com/embed/VytTEcf0dxQ" />
+<VideoEmbed src="https://www.youtube.com/embed/VytTEcf0dxQ" />
diff --git a/pages/es/network/delegating.mdx b/pages/es/network/delegating.mdx
index cb09370be55e..f5252346b9ea 100644
--- a/pages/es/network/delegating.mdx
+++ b/pages/es/network/delegating.mdx
@@ -2,8 +2,6 @@
 title: Delegador
 ---
 
-import { Video } from '@/components'
-
 Los delegadores son participantes de la red que delegan (es decir, "hacen stake") GRT a uno o varios indexadores. Los delegadores contribuyen a la seguridad de la red sin ejecutar ellos mismos un Graph Node.
 
 Al delegar en un Indexador, los Delegadores ganan una parte de las tarifas de las consultas del Indexador y de las recompensas. La cantidad de consultas que puede procesar un Indexador depende de su propio stake (y del delegado) y del precio que el indexador cobra por cada consulta, por lo que cuanto más participación se asigne a un Indexador, más consultas potenciales podrá procesar.
@@ -98,4 +96,4 @@ A veces, los intentos de delegar a los Indexadores a través de MetaMask pueden
 
 Esta guía proporciona una revisión completa de este documento, y cómo tener en cuenta todo lo que contiene mientras se interactúa con la interfaz de usuario.
 
-<Video src="https://www.youtube.com/embed/2G7S2gdURdc" />
+<VideoEmbed src="https://www.youtube.com/embed/2G7S2gdURdc" />
diff --git a/pages/es/network/explorer.mdx b/pages/es/network/explorer.mdx
index fca52963759b..268877b0afca 100644
--- a/pages/es/network/explorer.mdx
+++ b/pages/es/network/explorer.mdx
@@ -2,11 +2,9 @@
 title: Graph Explorer
 ---
 
-import { Video } from '@/components'
-
 Bienvenido al explorador de The Graph, o como nos gusta llamarlo, tu portal descentralizado al mundo de los subgrafos y los datos de la red. 👩🏽‍🚀 Este explorador de The Graph consta de varias partes en las que puedes interactuar con otros desarrolladores de subgrafos, desarrolladores de dApp, Curadores, Indexadores y Delegadores. Para obtener una descripción general de The Graph Explorer, échale un vistazo al siguiente video (o sigue leyendo lo que hemos escrito para ti):
 
-<Video src="https://www.youtube.com/embed/u224xf7rEBY" />
+<VideoEmbed src="https://www.youtube.com/embed/u224xf7rEBY" />
 
 ## Subgrafos
 
diff --git a/pages/es/network/indexing.mdx b/pages/es/network/indexing.mdx
index 2a431a35c56a..f089ccab2162 100644
--- a/pages/es/network/indexing.mdx
+++ b/pages/es/network/indexing.mdx
@@ -2,8 +2,6 @@
 title: Indexador
 ---
 
-import { Difficulty } from '@/components'
-
 Los Indexadores son operadores de nodos en The Graph Network que stakean Graph Tokens (GRT) para proporcionar servicios de indexación y procesamiento de consultas. Los Indexadores obtienen tarifas de consulta y recompensas de indexación por sus servicios. También obtienen ganacias de un pool de reembolso que se comparte con todos los contribuyentes de la red en proporción a su trabajo, siguiendo la idea de Function Rebate por parte de Cobbs-Douglas.
 
 Los GRT que se bloquean (en stake) dentro del protocolo están sujetos a un período de descongelación y pueden ser reducidos si los Indexadores son maliciosos y entregan datos incorrectos a las aplicaciones o si indexan información incorrecta. A los Indexadores también se les puede asignar participaciones por parte de los Delegadores, quienes buscan contribuir a la red.
diff --git a/pages/es/querying/billing.mdx b/pages/es/querying/billing.mdx
index fdd472cd64fe..df1ee47cc237 100644
--- a/pages/es/querying/billing.mdx
+++ b/pages/es/querying/billing.mdx
@@ -2,8 +2,6 @@
 title: Facturación en Subgraph Studio
 ---
 
-import { Video } from '@/components'
-
 ### Descripción
 
 Las facturas son extractos de los importes de pago que debe un cliente y suelen generarse semanalmente en el sistema. Se te pedirá que pagues tarifas basadas en las tarifas de consulta que generes utilizando tus claves API. El contrato de facturación vive en la red [Polygon](https://polygon.technology/). Te permitirá:
@@ -41,7 +39,7 @@ Hay 4 estados en los que puede estar tu factura:
 
 Si quieres ver una demostración rápida de cómo funciona la facturación en Subgraph Studio, mira el siguiente video:
 
-<Video src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
+<VideoEmbed src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
 
 ### Usuarios Multisig
 
diff --git a/pages/ja/cookbook/migrating-a-subgraph.mdx b/pages/ja/cookbook/migrating-a-subgraph.mdx
index bb6d5d72016a..f17e23e9b62b 100644
--- a/pages/ja/cookbook/migrating-a-subgraph.mdx
+++ b/pages/ja/cookbook/migrating-a-subgraph.mdx
@@ -2,8 +2,6 @@
 title: 既存のサブグラフをグラフネットワークに移行する
 ---
 
-import { Video } from '@/components'
-
 ## イントロダクション
 
 本ガイドは、サブグラフをホステッドサービスから The Graph Network に移行するためのガイドです。The Graph Network への移行は、Opyn、UMA、mStable、Audius、PoolTogether、Livepeer、RAI、Enzyme、DODO、Opyn、Pickle、BadgerDAO などのプロジェクトで成功を収めており、これらのプロジェクトはすべて、ネットワーク上の Indexer が提供するデータに依存しています。現在、The Graph Network には 200 以上のサブグラフが登録されており、クエリフィーを生成し、Web3 データのインデックスを積極的に作成しています。
@@ -149,7 +147,7 @@ The Graph Network が真の意味で分散化されるためには、プロト
 
 まだよくわからないという方も、ご安心ください。以下のリソースをチェックしたり、分散型ネットワークへのサブグラフの移行に関するビデオガイドをご覧ください:
 
-<Video src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
+<VideoEmbed src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
 
 - [The Graph Network のコントラクト](https://github.com/graphprotocol/contracts)
 - [キュレーションコントラクト](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - GNS が包括する基本的なコントラクト
diff --git a/pages/ja/deploying/subgraph-studio.mdx b/pages/ja/deploying/subgraph-studio.mdx
index ecf17e97ab33..e437320bd8de 100644
--- a/pages/ja/deploying/subgraph-studio.mdx
+++ b/pages/ja/deploying/subgraph-studio.mdx
@@ -2,8 +2,6 @@
 title: Subgraph Studioの使い方
 ---
 
-import { Video } from '@/components'
-
 新しいローンチパッドへようこそ 👩🏽‍🚀
 
 Subgraph Studio は、サブグラフを構築・作成し、メタデータを追加して、新しい分散型エクスプローラーに公開するための場所です（詳細は[こちら](/network/explorer)）
@@ -68,7 +66,7 @@ The Graph Network の機能やネットワークは順次追加されていき
 
 ここまで来ました - おめでとうございます。サブグラフの公開とは、CLI 内でサブグラフを展開した際に IPFS ハッシュが生成され、ネットワークの Ethereum スマートコントラクトに保存されることを意味します。サブグラフの公開を成功させるためには、この[ブログ](https://thegraph.com/blog/building-with-subgraph-studio)で紹介している以下のステップを踏む必要があります。以下のビデオ概要もチェックしてみてください。
 
-<Video src="https://www.youtube.com/embed/HfDgC2oNnwo" />
+<VideoEmbed src="https://www.youtube.com/embed/HfDgC2oNnwo" />
 
 公開する際には、メインネットまたはテストネットである Rinkeby のどちらかに公開することができます。初めてサブグラフを開発される方は、まず Rinkeby への公開から始めることをお勧めします。これにより、サブグラフが The Graph Explorer でどのように動作するかを確認することができ、キュレーション要素をテストすることができます。
 
diff --git a/pages/ja/network/curating.mdx b/pages/ja/network/curating.mdx
index 69e44602aa82..ffcc5268c359 100644
--- a/pages/ja/network/curating.mdx
+++ b/pages/ja/network/curating.mdx
@@ -2,8 +2,6 @@
 title: キュレーター
 ---
 
-import { Video } from '@/components'
-
 キュレーターは、グラフの分散型経済にとって重要な存在です。 キューレーターは、web3 のエコシステムに関する知識を用いて、グラフネットワークがインデックスを付けるべきサブグラフを評価し、シグナルを送ります。 キュレーターはエクスプローラーを通じてネットワークのデータを見て、シグナルを出す判断をすることができます。グラフネットワークは、良質なサブグラフにシグナルを送ったキュレーターに、サブグラフが生み出すクエリフィーのシェアを与えます。 キュレーターには、早期にシグナルを送るという経済的なインセンティブが働きます。 キュレーターからのシグナルはインデクサーにとって非常に重要で、インデクサーはシグナルを受けたサブグラフからデータを処理したり、インデックスを作成したりすることができます。
 
 シグナリングの際、キュレーターはサブグラフの特定のバージョンでシグナリングするか、auto-migrate を使ってシグナリングするかを決めることができます。 Auto-migrate を使ってシグナリングすると、キュレーターのシェアは常に開発者が公開した最新バージョンにアップグレードされます。 代わりに特定のバージョンでシグナルを送ることにした場合、シェアは常にその特定のバージョンのままとなります。
@@ -95,4 +93,4 @@ The Graph の場合は、 [Bancor が実装しているボンディングカー
 
 まだ不明点がありますか？ その他の不明点に関しては、 以下のキュレーションビデオガイドをご覧ください：
 
-<Video src="https://www.youtube.com/embed/VytTEcf0dxQ" />
+<VideoEmbed src="https://www.youtube.com/embed/VytTEcf0dxQ" />
diff --git a/pages/ja/network/delegating.mdx b/pages/ja/network/delegating.mdx
index 6872963bbda2..b3992df96aec 100644
--- a/pages/ja/network/delegating.mdx
+++ b/pages/ja/network/delegating.mdx
@@ -2,8 +2,6 @@
 title: デリゲーティング
 ---
 
-import { Video } from '@/components'
-
 デリゲーターは悪意の行動をしてもスラッシュされないが、デリゲーターにはデポジット税が課せられ、ネットワークの整合性を損なう可能性のある悪い意思決定を抑止します。
 
 このガイドでは、グラフネットワークで効果的なデリゲーターになるための方法を説明します。 デリゲーターは、デリゲートされたステークのすべてのインデクサーとともにプロトコルの収益を共有します。 デリゲーターは、複数の要素を考慮した上で、最善の判断でインデクサーを選ばなければなりません。 このガイドでは、メタマスクの適切な設定方法などについては説明しません。このガイドには 3 つのセクションがあります。 There are three sections in this guide:
@@ -96,4 +94,4 @@ At times, attempts to delegate to indexers via MetaMask can fail and result in p
 
 This guide provides a full review of this document, and how to consider everything in this document while interacting with the UI.
 
-<Video src="https://www.youtube.com/embed/2G7S2gdURdc" />
+<VideoEmbed src="https://www.youtube.com/embed/2G7S2gdURdc" />
diff --git a/pages/ja/network/explorer.mdx b/pages/ja/network/explorer.mdx
index 21d0a625def9..fada66a06f45 100644
--- a/pages/ja/network/explorer.mdx
+++ b/pages/ja/network/explorer.mdx
@@ -2,11 +2,9 @@
 title: エクスプローラー
 ---
 
-import { Video } from '@/components'
-
 グラフエクスプローラーは、サブグラフとネットワークデータの世界への分散型ポータルです。 👩🏽‍🚀 グラフエクスプローラーは、他のサブグラフ開発者、dapp 開発者、キュレーター、インデクサー、デリゲーターと交流できる複数のパートで構成されています。 グラフエクスプローラーの概要については、以下のビデオをご覧ください。
 
-<Video src="https://www.youtube.com/embed/u224xf7rEBY" />
+<VideoEmbed src="https://www.youtube.com/embed/u224xf7rEBY" />
 
 ## サブグラフ
 
diff --git a/pages/ja/network/indexing.mdx b/pages/ja/network/indexing.mdx
index 51b297b58c29..51eaae04e848 100644
--- a/pages/ja/network/indexing.mdx
+++ b/pages/ja/network/indexing.mdx
@@ -2,8 +2,6 @@
 title: インデクシング
 ---
 
-import { Difficulty } from '@/components'
-
 インデクサは、グラフネットワークのノードオペレータであり、グラフトークン（GRT）を賭けて、インデックス作成や問い合わせ処理のサービスを提供します。 インデクサーは、そのサービスの対価として、クエリフィーやインデックス作成の報酬を得ることができます。 また、Cobbs-Douglas Rebate Function に基づいて、ネットワーク貢献者全員にその成果に応じて分配される Rebate Pool からも報酬を得ることもできます。
 
 プロトコルにステークされた GRT は解凍期間が設けられており、インデクサーが悪意を持ってアプリケーションに不正なデータを提供したり、不正なインデックスを作成した場合には、スラッシュされる可能性があります。 また、インデクサーはデリゲーターからステークによる委任を受けて、ネットワークに貢献することができます。
diff --git a/pages/ja/querying/billing.mdx b/pages/ja/querying/billing.mdx
index 6261be27a9e3..78c5273cbdf7 100644
--- a/pages/ja/querying/billing.mdx
+++ b/pages/ja/querying/billing.mdx
@@ -2,8 +2,6 @@
 title: サブグラフスタジオでの課金
 ---
 
-import { Video } from '@/components'
-
 ### 概要
 
 請求書は、顧客が支払うべき支払い金額の明細であり、通常、システムでは週単位で生成されます。お客様の API キーを使用して生成したクエリ料に基づいて料金を支払う必要があります。課金コントラクトは、[Polygon](https://polygon.technology/)ネットワーク上に存在します。これにより、以下のことが可能になります:
@@ -41,7 +39,7 @@ import { Video } from '@/components'
 
 Subgraph Studio 上での課金機能のデモについては、以下のビデオをご覧ください:
 
-<Video src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
+<VideoEmbed src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
 
 ### マルチシグユーザー
 
diff --git a/pages/ko/cookbook/migrating-a-subgraph.mdx b/pages/ko/cookbook/migrating-a-subgraph.mdx
index 60d14dd389ef..931584cc50bc 100644
--- a/pages/ko/cookbook/migrating-a-subgraph.mdx
+++ b/pages/ko/cookbook/migrating-a-subgraph.mdx
@@ -2,8 +2,6 @@
 title: 기존 서브그래프를 그래프 네트워크로 마이그레이션하기
 ---
 
-import { Video } from '@/components'
-
 ## 소개
 
 이것은 호스팅 서비스에서 그래프 네트워크로의 서브그래프 마이그레이션(호스팅 서비스라고도 함)에 대한 가이드입니다. The Graph Network로의 마이그레이션은 네트워크의 인덱서가 제공하는 데이터에 의존하는 Opyn, UMA, mStable, Audius, PoolTogether, Livepeer, RAI, Enzyme, DODO, Opyn, Pickle 및 BadgerDAO와 같은 프로젝트에서 성공적이었습니다. 현재 그래프 네트워크에는 200개 이상의 서브그래프가 존재하며 쿼리 비용을 생성하고 web3 데이터를 적극적으로 인덱싱합니다.
@@ -149,7 +147,7 @@ While you get to decide on your query budget, there is no guarantee that an Inde
 
 If you're still confused, fear not! Check out the following resources or watch our video guide on migrating subgraphs to the decentralized network below:
 
-<Video src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
+<VideoEmbed src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
 
 - [The Graph Network Contracts](https://github.com/graphprotocol/contracts)
 - [Curation Contract](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - the underlying contract that the GNS wraps around
diff --git a/pages/ko/deploying/subgraph-studio.mdx b/pages/ko/deploying/subgraph-studio.mdx
index 9652040dcaac..26978f0a504b 100644
--- a/pages/ko/deploying/subgraph-studio.mdx
+++ b/pages/ko/deploying/subgraph-studio.mdx
@@ -2,8 +2,6 @@
 title: Subgraph Studio 사용법
 ---
 
-import { Video } from '@/components'
-
 당신의 새로운 런치패드에 오신 것을 환영합니다 👩🏽‍🚀
 
 Subgraph Studio는 서브그래프를 작성 및 생성하고, 메타데이터를 추가하고, 새로운 분산 탐색기에 게시할 수 있는 곳입니다(자세한 내용은 [여기](/network/explorer)를 확인하세요).
@@ -68,7 +66,7 @@ The Graph 네트워크는 아직 호스팅 서비스에서 사용할 수 있는
 
 여러분은 여기까지 왔습니다. 축하드립니다! 서브그래프를 게시한다는 것은 CLI 내에서 서브그래프를 배포할 때 IPFS 해시가 생성되었고, 네트워크의 이더리움 스마트 컨트랙트에 저장되었음을 의미합니다. 서브그래프를 성공적으로 게시하려면 [이 블로그](https://thegraph.com/blog/building-with-subgraph-studio)에 설명된 다음 단계를 거쳐야 합니다. 아래의 비디오 개요도 확인하시기 바랍니다.
 
-<Video src="https://www.youtube.com/embed/HfDgC2oNnwo" />
+<VideoEmbed src="https://www.youtube.com/embed/HfDgC2oNnwo" />
 
 퍼블리싱 플로우를 진행하는 동안 메인넷이나 우리가 지원하는 테스트넷인 Rinkeby로 푸시할 수 있음을 기억하시기 바랍니다. 서브그래프 개발자가 처음이라면 무료인 Rinkeby에 퍼블리싱하는 것으로 시작하는 것이 좋습니다. 이를 통해 그래프 탐색기에서 서브그래프가 어떻게 작동하는지 확인하고 큐레이션 요소를 테스트할 수 있습니다.
 
diff --git a/pages/ko/network/curating.mdx b/pages/ko/network/curating.mdx
index e87b396888a9..ad32dd12dd18 100644
--- a/pages/ko/network/curating.mdx
+++ b/pages/ko/network/curating.mdx
@@ -2,8 +2,6 @@
 title: 큐레이팅
 ---
 
-import { Video } from '@/components'
-
 큐레이터들은 더 그래프의 탈중앙화 경제에 매우 중요한 역할을 합니다. 이들은 웹3 생태계에 대한 지식을 활용하여 그래프 네트워크에 의해 색인화되어야 하는 서브그래프에 대한 평가와 신호를 수행합니다. 탐색기를 통해 큐레이터는 네트워크 데이터를 보고 신호 전달 결정을 내릴 수 있습니다. 더그래프 네트워크는 양질의 서브그래프에 신호를 보내는 큐레이터에게 서브그래프가 생성하는 쿼리 수수료에 대한 몫을 보상합니다. 큐레이터들은 이른 신호를 보내도록 경제적으로 장려된다. 큐레이터의 이러한 신호들은 신호되어진 서브그래프들로부터 데이터를 처리하거나 인덱싱 할 수 있는 인덱서들에게 중요합니다.
 
 신호를 보낼 때 큐레이터는 서브그래프의 특정 버전에 신호를 보내거나 자동 마이그레이션을 사용하여 신호를 보내기로 결정할 수 있습니다. 자동 마이그레이션을 사용하여 신호를 보낼 때 큐레이터의 공유는 항상 개발자가 게시한 최신 버전으로 업그레이드됩니다. 만약, 여러분이 이를 대신하여 특정 버전에서 신호를 보내기로 결정하면 공유는 항상 이 특정 버전으로 유지됩니다.
@@ -95,4 +93,4 @@ import { Video } from '@/components'
 
 아직도 혼란스러우신가요? 아래의 큐레이션 비디오 가이드를 확인해보시길 바랍니다.
 
-<Video src="https://www.youtube.com/embed/VytTEcf0dxQ" />
+<VideoEmbed src="https://www.youtube.com/embed/VytTEcf0dxQ" />
diff --git a/pages/ko/network/delegating.mdx b/pages/ko/network/delegating.mdx
index d4dcb113d4c8..7b19d2ea537d 100644
--- a/pages/ko/network/delegating.mdx
+++ b/pages/ko/network/delegating.mdx
@@ -2,8 +2,6 @@
 title: 위임하기
 ---
 
-import { Video } from '@/components'
-
 위임자는 나쁜 행동으로 인해 슬래싱 삭감을 받진 않지만, 네트워크의 무결성을 해칠 수 있는 잘못된 의사 결정에 대한 인센티브를 없애기 위해 위임자에게 보증금이 부과됩니다.
 
 이 가이드는 Graph 네트워크에서 효과적인 위임자가 되는 방법을 설명합니다. 위임자는 그들의 지분을 위임한 모든 인덱서와 함께 프로토콜의 수익을 공유합니다. 위임자는 여러 요소를 기반으로 인덱서를 선택하기 위해 최선의 판단을 내려야 합니다. 이 가이드는 메타마스크를 올바르게 설정하는 것과 같은 단계를 다루지 않습니다. 해당 정보는 인터넷에 널리 퍼져 있기 때문입니다. 이 가이드에는 세 가지 섹션이 존재합니다:
@@ -94,4 +92,4 @@ At times, attempts to delegate to indexers via MetaMask can fail and result in p
 
 This guide provides a full review of this document, and how to consider everything in this document while interacting with the UI.
 
-<Video src="https://www.youtube.com/embed/2G7S2gdURdc" />
+<VideoEmbed src="https://www.youtube.com/embed/2G7S2gdURdc" />
diff --git a/pages/ko/network/explorer.mdx b/pages/ko/network/explorer.mdx
index 919c0dd88e46..c3a84dfa516b 100644
--- a/pages/ko/network/explorer.mdx
+++ b/pages/ko/network/explorer.mdx
@@ -2,11 +2,9 @@
 title: 탐색기
 ---
 
-import { Video } from '@/components'
-
 그래프 탐색기, 혹은 우리가 흔히 부르는 것 처럼, 서브그래프와 네트워크 데이터의 세계로 향하는 탈중앙화 포탈에 오신것을 환영합니다! 그래프 탐색기는 다른 서브그래프 개발자, dapp 개발자, 큐레이터, 인덱서 및 위임자와 상호 작용할 수 있는 다양한 부분들로 구성됩니다. 그래프 탐색기에 대한 일반적인 개요를 알아보기 위해 아래의 비디오를 확인하세요.
 
-<Video src="https://www.youtube.com/embed/u224xf7rEBY" />
+<VideoEmbed src="https://www.youtube.com/embed/u224xf7rEBY" />
 
 ## 서브그래프
 
diff --git a/pages/ko/network/indexing.mdx b/pages/ko/network/indexing.mdx
index 1790dc924b77..1e33c20ecb4c 100644
--- a/pages/ko/network/indexing.mdx
+++ b/pages/ko/network/indexing.mdx
@@ -2,8 +2,6 @@
 title: 인덱싱(indexing)
 ---
 
-import { Difficulty } from '@/components'
-
 인덱서는 인덱싱 및 쿼리 프로세싱 서비스를 제공하기 위해 더그래프 네트워크 상에 그래프 토큰(GRT)을 스테이킹하는 노드 운용자들입니다. 인덱서는 그들의 서비스에 대한 쿼리 수수료 및 인덱싱 보상을 얻습니다. 더불어, 그들은 Cobbs-Douglas 리베이트 기능에 따라, 그들의 업무에 비례하여 모든 네트워크 기여자와 함께 공유되는 리베이트 풀로부터 발생하는 수익 또한 얻습니다.
 
 프로토콜에 스테이킹된 GRT는 해빙 기간이 적용되며, 인덱서가 악의적으로 응용 프로그램에 잘못된 데이터를 제공하거나 잘못된 인덱싱을 시행하는 경우 슬래싱(삭감) 패널티를 받을 수 있습니다. 또한, 인덱서들은 네트워크에 기여하기 위해서 위임자(Delegator)들로 부터 지분을 위임받을 수도 있습니다.
diff --git a/pages/ko/querying/billing.mdx b/pages/ko/querying/billing.mdx
index 29668d054b7f..f4e4d6b50e8b 100644
--- a/pages/ko/querying/billing.mdx
+++ b/pages/ko/querying/billing.mdx
@@ -2,8 +2,6 @@
 title: Subgraph Studio상의 청구
 ---
 
-import { Video } from '@/components'
-
 ### 개요
 
 인보이스는 고객이 지불해야 하는 지불 금액의 명세서로, 일반적으로 시스템에서 일주일 단위로 생성됩니다. API 키를 사용하여 생성한 쿼리 수수료에 따라 수수료를 지불해야 합니다. 청구 컨트랙트는 [Polygon](https://polygon.technology/) 네트워크에 존재합니다. 다음을 수행할 수 있습니다:
@@ -41,7 +39,7 @@ API 키를 사용한 경우 매주 말에 이 기간 동안 생성한 쿼리 수
 
 Subgraph Studio에서 청구가 작동하는 방식에 대한 빠른 이해를 위해 아래의 비디오를 시청해 주시기 바랍니다:
 
-<Video src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
+<VideoEmbed src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
 
 ### Multisig Users
 
diff --git a/pages/vi/cookbook/migrating-a-subgraph.mdx b/pages/vi/cookbook/migrating-a-subgraph.mdx
index 9bc23f898243..1cf214fb2cc4 100644
--- a/pages/vi/cookbook/migrating-a-subgraph.mdx
+++ b/pages/vi/cookbook/migrating-a-subgraph.mdx
@@ -2,8 +2,6 @@
 title: Migrating an Existing Subgraph to The Graph Network
 ---
 
-import { Video } from '@/components'
-
 ## Giới thiệu
 
 This is a guide on how to migrate your subgraph from the Hosted Service to The Graph Network. The migration to The Graph Network has been successful for projects like Opyn, UMA, mStable, Audius, PoolTogether, Livepeer, RAI, Enzyme, DODO, Opyn, Pickle, and BadgerDAO all of which are relying on data served by Indexers on the network. There are now over 200 subgraphs live on The Graph Network, generating query fees and actively indexing web3 data.
@@ -149,7 +147,7 @@ Remember that it's a dynamic and growing market, but how you interact with it is
 
 If you're still confused, fear not! Check out the following resources or watch our video guide on migrating subgraphs to the decentralized network below:
 
-<Video src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
+<VideoEmbed src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
 
 - [The Graph Network Contracts](https://github.com/graphprotocol/contracts)
 - [Curation Contract](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - the underlying contract that the GNS wraps around
diff --git a/pages/vi/deploying/subgraph-studio.mdx b/pages/vi/deploying/subgraph-studio.mdx
index 8df46841dbfb..6e61d04b0763 100644
--- a/pages/vi/deploying/subgraph-studio.mdx
+++ b/pages/vi/deploying/subgraph-studio.mdx
@@ -2,8 +2,6 @@
 title: How to Use the Subgraph Studio
 ---
 
-import { Video } from '@/components'
-
 Welcome to your new launchpad 👩🏽‍🚀
 
 The Subgraph Studio is your place to build and create subgraphs, add metadata, and publish them to the new decentralized Explorer (more on that [here](/network/explorer)).
@@ -68,7 +66,7 @@ If you’d like to test your subgraph before publishing it to the network, you c
 
 You’ve made it this far - congrats! Publishing your subgraph means that an IPFS hash was generated when you deployed the subgraph within the CLI and is stored in the network’s Ethereum smart contracts. In order to publish your subgraph successfully, you’ll need to go through the following steps outlined in this [blog](https://thegraph.com/blog/building-with-subgraph-studio). Check out the video overview below as well:
 
-<Video src="https://www.youtube.com/embed/HfDgC2oNnwo" />
+<VideoEmbed src="https://www.youtube.com/embed/HfDgC2oNnwo" />
 
 Remember, while you’re going through your publishing flow, you’ll be able to push to either mainnet or Rinkeby, the testnet we support. If you’re a first time subgraph developer, we highly suggest you start with publishing to Rinkeby, which is free to do. This will allow you to see how the subgraph will work in The Graph Explorer and will allow you to test curation elements.
 
diff --git a/pages/vi/network/curating.mdx b/pages/vi/network/curating.mdx
index 158db0077147..62131eb7ca0c 100644
--- a/pages/vi/network/curating.mdx
+++ b/pages/vi/network/curating.mdx
@@ -2,8 +2,6 @@
 title: Curator
 ---
 
-import { Video } from '@/components'
-
 Curators rất quan trọng đối với nền kinh tế phi tập trung The Graph. Họ sử dụng kiến thức của mình về hệ sinh thái web3 để đánh giá và báo hiệu trên các subgraph cần được lập chỉ mục bởi Mạng The Graph. Thông qua Explorer, curator có thể xem dữ liệu mạng để đưa ra quyết định báo hiệu. Mạng The Graph thưởng cho những curator báo hiệu trên các subgraph chất lượng tốt sẽ kiếm được một phần phí truy vấn mà các subgraph tạo ra. Curator được khuyến khích về mặt kinh tế để phát tín hiệu sớm. Những tín hiệu này từ curator rất quan trọng đối với Indexer, những người này sau đó có thể xử lý hoặc lập chỉ mục dữ liệu từ các subgraph được báo hiệu này.
 
 Khi phát tín hiệu, người phụ trách có thể quyết định báo hiệu trên một phiên bản cụ thể của subgraph hoặc báo hiệu bằng tính năng tự động di chuyển. Khi báo hiệu bằng cách sử dụng tính năng tự động di chuyển, cổ phần của curator sẽ luôn được nâng cấp lên phiên bản mới nhất do nhà phát triển xuất bản. Nếu thay vào đó bạn quyết định báo hiệu trên một phiên bản cụ thể, cổ phần của bạn sẽ luôn ở trên phiên bản cụ thể này.
@@ -95,4 +93,4 @@ Cổ phần curation không thể được "mua" hoặc "bán" như các token E
 
 Vẫn còn thắc mắc? Xem video hướng dẫn Curation của chúng tôi bên dưới:
 
-<Video src="https://www.youtube.com/embed/VytTEcf0dxQ" />
+<VideoEmbed src="https://www.youtube.com/embed/VytTEcf0dxQ" />
diff --git a/pages/vi/network/delegating.mdx b/pages/vi/network/delegating.mdx
index 9cf335fba31d..e670e28cfd32 100644
--- a/pages/vi/network/delegating.mdx
+++ b/pages/vi/network/delegating.mdx
@@ -2,8 +2,6 @@
 title: Delegator
 ---
 
-import { Video } from '@/components'
-
 Delegator (Người ủy quyền) không bị phạt cắt tài sản (slash) vì hành vi xấu, nhưng có một khoản thuế đặt cọc đối với Delegator để ngăn cản việc đưa ra quyết định kém có thể làm tổn hại đến tính toàn vẹn của mạng.
 
 Hướng dẫn này sẽ giải thích cách trở thành delegator hiệu quả trong Mạng The Graph. Delegator chia sẻ thu nhập của giao thức cùng với tất cả những indexer trên cổ phần stake được ủy quyền của họ. Delegator phải sử dụng phán đoán tốt nhất của họ để chọn Indexer dựa trên nhiều yếu tố. Xin lưu ý rằng hướng dẫn này sẽ không bao gồm các bước như thiết lập Metamask đúng cách, vì thông tin đó có sẵn rộng rãi trên internet. Có ba phần trong hướng dẫn này:
@@ -97,4 +95,4 @@ At times, attempts to delegate to indexers via MetaMask can fail and result in p
 
 This guide provides a full review of this document, and how to consider everything in this document while interacting with the UI.
 
-<Video src="https://www.youtube.com/embed/2G7S2gdURdc" />
+<VideoEmbed src="https://www.youtube.com/embed/2G7S2gdURdc" />
diff --git a/pages/vi/network/explorer.mdx b/pages/vi/network/explorer.mdx
index b2347a80ce35..c980ccea95e8 100644
--- a/pages/vi/network/explorer.mdx
+++ b/pages/vi/network/explorer.mdx
@@ -2,11 +2,9 @@
 title: Trình khám phá Graph
 ---
 
-import { Video } from '@/components'
-
 Chào mừng bạn đến với Graph Explorer, hay như chúng tôi thường gọi, cổng thông tin phi tập trung của bạn vào thế giới subgraphs và dữ liệu mạng. 👩🏽‍🚀 Graph Explorer bao gồm nhiều phần để bạn có thể tương tác với các nhà phát triển subgraph khác, nhà phát triển dapp, Curators, Indexers, và Delegators. Để biết tổng quan chung về Graph Explorer, hãy xem video bên dưới (hoặc tiếp tục đọc bên dưới):
 
-<Video src="https://www.youtube.com/embed/u224xf7rEBY" />
+<VideoEmbed src="https://www.youtube.com/embed/u224xf7rEBY" />
 
 ## Subgraphs
 
diff --git a/pages/vi/network/indexing.mdx b/pages/vi/network/indexing.mdx
index d1e92fc63dc5..c7f10303f4fe 100644
--- a/pages/vi/network/indexing.mdx
+++ b/pages/vi/network/indexing.mdx
@@ -2,8 +2,6 @@
 title: Indexer
 ---
 
-import { Difficulty } from '@/components'
-
 Indexer là những người vận hành node (node operator) trong Mạng The Graph có stake Graph Token (GRT) để cung cấp các dịch vụ indexing và xử lý truy vấn. Indexers kiếm được phí truy vấn và phần thưởng indexing cho các dịch vụ của họ. Họ cũng kiếm được tiền từ Rebate Pool (Pool Hoàn phí) được chia sẻ với tất cả những người đóng góp trong mạng tỷ lệ thuận với công việc của họ, tuân theo Chức năng Rebate Cobbs-Douglas.
 
 GRT được stake trong giao thức sẽ phải trải qua một khoảng thời gian chờ "tan băng" (thawing period) và có thể bị cắt nếu Indexer có ác ý và cung cấp dữ liệu không chính xác cho các ứng dụng hoặc nếu họ index không chính xác. Indexer cũng có thể được ủy quyền stake từ Delegator, để đóng góp vào mạng.
diff --git a/pages/vi/querying/billing.mdx b/pages/vi/querying/billing.mdx
index 4c07de7a62bb..11d5e2b60670 100644
--- a/pages/vi/querying/billing.mdx
+++ b/pages/vi/querying/billing.mdx
@@ -2,8 +2,6 @@
 title: Billing on the Subgraph Studio
 ---
 
-import { Video } from '@/components'
-
 ### Tổng quan
 
 Invoices are statements of payment amounts owed by a customer and are typically generated on a weekly basis in the system. You’ll be required to pay fees based on the query fees you generate using your API keys. The billing contract lives on the [Polygon](https://polygon.technology/) network. It’ll allow you to:
@@ -41,7 +39,7 @@ There are 4 states your invoice can be in:
 
 For a quick demo of how billing works on the Subgraph Studio, check out the video below:
 
-<Video src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
+<VideoEmbed src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
 
 ### Multisig Users
 
diff --git a/pages/zh/cookbook/migrating-a-subgraph.mdx b/pages/zh/cookbook/migrating-a-subgraph.mdx
index b79a86ccbd5b..cb74ea1452bd 100644
--- a/pages/zh/cookbook/migrating-a-subgraph.mdx
+++ b/pages/zh/cookbook/migrating-a-subgraph.mdx
@@ -2,8 +2,6 @@
 title: 将现有子图迁移到Graph网络
 ---
 
-import { Video } from '@/components'
-
 ## 介绍
 
 这是有关如何将子图从托管服务迁移到图网络的指南。 对于 Opyn、UMA、mStable、Audius、PoolTogether、Livepeer、RAI、Enzyme、DODO、Opyn、Pickle 和 BadgerDAO 等项目，向 The Graph Network 的迁移已经成功，所有这些项目都依赖于网络上索引器提供的数据。 The Graph Network 上现在有 200 多个子图，产生查询费用并积极索引 web3 数据。
@@ -149,7 +147,7 @@ _虽然这种机制目前在网络上运行，但社区目前正在讨论降低
 
 如果您仍然感到困惑，请不要害怕！ 查看以下资源或观看我们的视频指南，了解将子图迁移到下面的去中心化网络：
 
-<Video src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
+<VideoEmbed src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
 
 - [The Graph 网络合约](https://github.com/graphprotocol/contracts)
 - [Curation Contract](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - GNS 包裹的底层合约
diff --git a/pages/zh/deploying/subgraph-studio.mdx b/pages/zh/deploying/subgraph-studio.mdx
index 6a56a989c68d..f5e87ac2d7e1 100644
--- a/pages/zh/deploying/subgraph-studio.mdx
+++ b/pages/zh/deploying/subgraph-studio.mdx
@@ -2,8 +2,6 @@
 title: 如何使用子图工作室
 ---
 
-import { Video } from '@/components'
-
 欢迎使用您的新启动板 👩🏽‍🚀
 
 Subgraph Studio 是您构建和创建子图、添加元数据并将其发布到新的分散式资源管理器的地方（更多关于[这里](/network/explorer)）。
@@ -68,7 +66,7 @@ The Graph 网络还不能支持所有的数据源和 托管服务上可用的功
 
 你已经做到了这一点 - 恭喜！ 发布子图意味着当您在 CLI 中部署子图时会生成 IPFS 哈希，并存储在网络的以太坊智能合约中。 为了成功发布您的子图，您需要完成此[博客](https://thegraph.com/blog/building-with-subgraph-studio)中列出的以下步骤. 还请查看下面的视频概述：
 
-<Video src="https://www.youtube.com/embed/HfDgC2oNnwo" />
+<VideoEmbed src="https://www.youtube.com/embed/HfDgC2oNnwo" />
 
 请记住，在您完成发布流程时，您将能够推送到我们支持的测试网主网或 Rinkeby。 如果您是第一次开发子图，我们强烈建议您从发布到 Rinkeby 开始，这是免费的。 这将允许您查看子图在 The Graph Explorer 中的工作方式，并允许您测试管理元素。
 
diff --git a/pages/zh/network/curating.mdx b/pages/zh/network/curating.mdx
index e2602ce07d23..510fe767cc23 100644
--- a/pages/zh/network/curating.mdx
+++ b/pages/zh/network/curating.mdx
@@ -2,8 +2,6 @@
 title: 策展
 ---
 
-import { Video } from '@/components'
-
 策展人对于 The Graph 去中心化的经济至关重要。 他们利用自己对 web3 生态系统的了解，对应该被 The Graph 网络索引的子图进行评估并发出信号。 通过资源管理器，策展人能够查看网络数据以做出信号决定。 The Graph 网络对那些在优质子图上发出信号的策展人给予奖励，并从子图产生的查询费中分得一部分。 在经济上，策展人被激励着尽早发出信号。 这些来自策展人的线索对索引人来说非常重要，他们可以对这些发出信号的子图进行处理或索引。
 
 在发出信号时，策展人可以决定在子图的一个特定版本上发出信号，或者使用自动迁移发出信号。 当使用自动迁移发出信号时，策展人的份额将始终升级到由开发商发布的最新版本。 如果你决定在一个特定的版本上发出信号，股份将始终保持在这个特定的版本上。
@@ -95,4 +93,4 @@ Remember that curation is risky. 请做好你的工作，确保你在你信任
 
 还有困惑吗？ 点击下面查看策展视频指导：
 
-<Video src="https://www.youtube.com/embed/VytTEcf0dxQ" />
+<VideoEmbed src="https://www.youtube.com/embed/VytTEcf0dxQ" />
diff --git a/pages/zh/network/delegating.mdx b/pages/zh/network/delegating.mdx
index 01f9e8836030..160f97adadbc 100644
--- a/pages/zh/network/delegating.mdx
+++ b/pages/zh/network/delegating.mdx
@@ -2,8 +2,6 @@
 title: 委托人
 ---
 
-import { Video } from '@/components'
-
 委托人不能因为不良行为而被取消，但对委托有存款税，以抑制可能损害网络完整性的不良决策。
 
 本指南将解释如何在 Graph 网络中成为一个有效的委托人。 委托人与所有索引人一起分享其委托股权的协议收益。 委托人必须根据多种因素，运用他们的最佳判断力来选择索引人。 请注意，本指南将不涉及正确设置 Metamask 等步骤，因为这些信息在互联网上广泛存在。 本指南有三个部分：
@@ -93,4 +91,4 @@ At times, attempts to delegate to indexers via MetaMask can fail and result in p
 
 This guide provides a full review of this document, and how to consider everything in this document while interacting with the UI.
 
-<Video src="https://www.youtube.com/embed/2G7S2gdURdc" />
+<VideoEmbed src="https://www.youtube.com/embed/2G7S2gdURdc" />
diff --git a/pages/zh/network/explorer.mdx b/pages/zh/network/explorer.mdx
index d60df7f567fa..db6d05ca3878 100644
--- a/pages/zh/network/explorer.mdx
+++ b/pages/zh/network/explorer.mdx
@@ -2,11 +2,9 @@
 title: 浏览器
 ---
 
-import { Video } from '@/components'
-
 欢迎使用 Graph 浏览器，或者我们可以称它为您进入子图和网络数据世界的去中心化门户。 The Graph 浏览器由多个部分组成，您可以在其中与其他子图开发人员、去中心化应用开发人员、策展人、索引人和 委托人进行交互。 有关 Graph 浏览器的通用概述，请查看下面的视频（或继续阅读下面的内容）：
 
-<Video src="https://www.youtube.com/embed/u224xf7rEBY" />
+<VideoEmbed src="https://www.youtube.com/embed/u224xf7rEBY" />
 
 ## 子图
 
diff --git a/pages/zh/network/indexing.mdx b/pages/zh/network/indexing.mdx
index b252c8419cb9..0d3da06d176e 100644
--- a/pages/zh/network/indexing.mdx
+++ b/pages/zh/network/indexing.mdx
@@ -2,8 +2,6 @@
 title: 索引
 ---
 
-import { Difficulty } from '@/components'
-
 索引人是 The Graph 网络中的节点运营商，他们质押 Graph 通证 (GRT) 以提供索引和查询处理服务。 索引人通过他们的服务赚取查询费和索引奖励。 他们还根据 Cobbs-Douglas 回扣函数从回扣池中赚取收益，该回扣池与所有网络贡 ​​ 献者按他们的工作成比例共享。
 
 抵押在协议中的 GRT 会受到解冻期的影响，如果索引人是恶意的并向应用程序提供不正确的数据或索引不正确，则可能会被削减。 索引人也可以从委托人那里获得委托，为网络做出贡献。
diff --git a/pages/zh/querying/billing.mdx b/pages/zh/querying/billing.mdx
index 6e629b965cb6..a8b82524ff59 100644
--- a/pages/zh/querying/billing.mdx
+++ b/pages/zh/querying/billing.mdx
@@ -2,8 +2,6 @@
 title: 子图工作室的计费
 ---
 
-import { Video } from '@/components'
-
 ### 概述
 
 发票是客户所欠付款金额的报表，通常在系统中每周生成一次。 你需要根据你使用 API 密钥产生的查询费用来支付费用。 账单合同在[Polygon](https://polygon.technology/)网络上。 它将允许你：
@@ -41,7 +39,7 @@ import { Video } from '@/components'
 
 关于在 Subgraph Studio 上如何进行计费的快速演示，请看下面的视频。
 
-<Video src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
+<VideoEmbed src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
 
 ### 多重签名用户
 

From 453b431517b191f882c9980be8310987119b6a07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benoi=CC=82t=20Rouleau?= <benoit.rouleau@icloud.com>
Date: Tue, 9 Aug 2022 13:12:23 -0400
Subject: [PATCH 4/5] Add `youtube` prop to `VideoEmbed` component

---
 components/VideoEmbed.tsx                  | 22 +++++++++++++++++++---
 pages/ar/cookbook/migrating-a-subgraph.mdx |  2 +-
 pages/ar/deploying/subgraph-studio.mdx     |  2 +-
 pages/ar/network/curating.mdx              |  2 +-
 pages/ar/network/delegating.mdx            |  2 +-
 pages/ar/network/explorer.mdx              |  2 +-
 pages/ar/querying/billing.mdx              |  2 +-
 pages/en/cookbook/migrating-a-subgraph.mdx |  2 +-
 pages/en/deploying/subgraph-studio.mdx     |  2 +-
 pages/en/network/curating.mdx              |  2 +-
 pages/en/network/delegating.mdx            |  2 +-
 pages/en/network/explorer.mdx              |  2 +-
 pages/en/querying/billing.mdx              |  2 +-
 pages/es/cookbook/migrating-a-subgraph.mdx |  2 +-
 pages/es/deploying/subgraph-studio.mdx     |  2 +-
 pages/es/network/curating.mdx              |  2 +-
 pages/es/network/delegating.mdx            |  2 +-
 pages/es/network/explorer.mdx              |  2 +-
 pages/es/querying/billing.mdx              |  2 +-
 pages/ja/cookbook/migrating-a-subgraph.mdx |  2 +-
 pages/ja/deploying/subgraph-studio.mdx     |  2 +-
 pages/ja/network/curating.mdx              |  2 +-
 pages/ja/network/delegating.mdx            |  2 +-
 pages/ja/network/explorer.mdx              |  2 +-
 pages/ja/querying/billing.mdx              |  2 +-
 pages/ko/cookbook/migrating-a-subgraph.mdx |  2 +-
 pages/ko/deploying/subgraph-studio.mdx     |  2 +-
 pages/ko/network/curating.mdx              |  2 +-
 pages/ko/network/delegating.mdx            |  2 +-
 pages/ko/network/explorer.mdx              |  2 +-
 pages/ko/querying/billing.mdx              |  2 +-
 pages/vi/cookbook/migrating-a-subgraph.mdx |  2 +-
 pages/vi/deploying/subgraph-studio.mdx     |  2 +-
 pages/vi/network/curating.mdx              |  2 +-
 pages/vi/network/delegating.mdx            |  2 +-
 pages/vi/network/explorer.mdx              |  2 +-
 pages/vi/querying/billing.mdx              |  2 +-
 pages/zh/cookbook/migrating-a-subgraph.mdx |  2 +-
 pages/zh/deploying/subgraph-studio.mdx     |  2 +-
 pages/zh/network/curating.mdx              |  2 +-
 pages/zh/network/delegating.mdx            |  2 +-
 pages/zh/network/explorer.mdx              |  2 +-
 pages/zh/querying/billing.mdx              |  2 +-
 43 files changed, 61 insertions(+), 45 deletions(-)

diff --git a/components/VideoEmbed.tsx b/components/VideoEmbed.tsx
index 4d3521c6e50b..c257dbffb528 100644
--- a/components/VideoEmbed.tsx
+++ b/components/VideoEmbed.tsx
@@ -1,11 +1,27 @@
 import { HTMLAttributes } from 'react'
 
-export type VideoProps = { src: string } & HTMLAttributes<HTMLElement>
+export type VideoProps = (
+  | {
+      /** Video embed URL. */
+      src: string
+      youtube?: never
+    }
+  | {
+      /** YouTube video ID. */
+      youtube: string
+      src?: never
+    }
+) &
+  HTMLAttributes<HTMLElement>
 
-export const VideoEmbed = ({ src, ...props }: VideoProps) => {
+export const VideoEmbed = ({ src, youtube, ...props }: VideoProps) => {
   return (
     <figure sx={{ paddingBottom: `${100 / (16 / 9)}%` }} {...props}>
-      <iframe src={src} allowFullScreen sx={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%' }} />
+      <iframe
+        src={src ?? `https://www.youtube.com/embed/${youtube}`}
+        allowFullScreen
+        sx={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%' }}
+      />
     </figure>
   )
 }
diff --git a/pages/ar/cookbook/migrating-a-subgraph.mdx b/pages/ar/cookbook/migrating-a-subgraph.mdx
index e507080f934a..b89d62758e65 100644
--- a/pages/ar/cookbook/migrating-a-subgraph.mdx
+++ b/pages/ar/cookbook/migrating-a-subgraph.mdx
@@ -147,7 +147,7 @@ _بينما تتم هذه الآلية حاليا على الشبكة ، ينا
 
 إذا كنت لا تزال في حيرة من أمرك ، فلا تخف! راجع المصادر التالية أو شاهد الفيديو الخاص بنا حول ترحيل الـ subgraphs إلى الشبكة اللامركزية أدناه:
 
-<VideoEmbed src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
+<VideoEmbed youtube="CzdQ3dFFrjo" />
 
 - [عقود شبكة The Graph](https://github.com/graphprotocol/contracts)
 - [ عقد التنسيق](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - العقد الأساسي الذي تلتف حوله GNS
diff --git a/pages/ar/deploying/subgraph-studio.mdx b/pages/ar/deploying/subgraph-studio.mdx
index a9670e1af1a7..c9434d838f85 100644
--- a/pages/ar/deploying/subgraph-studio.mdx
+++ b/pages/ar/deploying/subgraph-studio.mdx
@@ -66,7 +66,7 @@ title: كيفية استخدام Subgraph Studio
 
 لقد نجحت في الوصول إلى هذا الحد - تهانينا! نشر الـ subgraph يعني أنه تم إنشاء IPFS hash عند نشرك لـ subgraph ضمن CLI وتخزينه في عقود Ethereum الذكية للشبكة. ولنشر الـ subgraph الخاص بك بنجاح ، ستحتاج إلى اتباع الخطوات التالية الموجزة في هذه [ المدونة ](https://thegraph.com/blog/building-with-subgraph-studio). راجع الفيديو أدناه أيضًا:
 
-<VideoEmbed src="https://www.youtube.com/embed/HfDgC2oNnwo" />
+<VideoEmbed youtube="HfDgC2oNnwo" />
 
 تذكر ، أثناء تقدمك في تدفق النشر ، ستتمكن من الدفع(push) إما إلى mainnet أو Rinkeby ، وهي testnet التي ندعمها. إذا كنت مطور subgraph لأول مرة ، فنحن نقترح بشدة أن تبدأ بالنشر على Rinkeby ، وهو مجاني. سيسمح لك ذلك بمعرفة كيفية عمل الـ subgraph في The Graph Explorer وسيسمح لك باختبار عناصر التنسيق.
 
diff --git a/pages/ar/network/curating.mdx b/pages/ar/network/curating.mdx
index a0d5c6a19b91..bb518e177d45 100644
--- a/pages/ar/network/curating.mdx
+++ b/pages/ar/network/curating.mdx
@@ -93,4 +93,4 @@ title: (التنسيق) curating
 
 لازلت مشوشا؟ راجع فيديو دليل التنسيق أدناه:
 
-<VideoEmbed src="https://www.youtube.com/embed/VytTEcf0dxQ" />
+<VideoEmbed youtube="VytTEcf0dxQ" />
diff --git a/pages/ar/network/delegating.mdx b/pages/ar/network/delegating.mdx
index 6d5bfa82fe00..0ca35665a8ac 100644
--- a/pages/ar/network/delegating.mdx
+++ b/pages/ar/network/delegating.mdx
@@ -91,4 +91,4 @@ At times, attempts to delegate to indexers via MetaMask can fail and result in p
 
 This guide provides a full review of this document, and how to consider everything in this document while interacting with the UI.
 
-<VideoEmbed src="https://www.youtube.com/embed/2G7S2gdURdc" />
+<VideoEmbed youtube="2G7S2gdURdc" />
diff --git a/pages/ar/network/explorer.mdx b/pages/ar/network/explorer.mdx
index eec8a95889fc..adc07959c09d 100644
--- a/pages/ar/network/explorer.mdx
+++ b/pages/ar/network/explorer.mdx
@@ -4,7 +4,7 @@ title: مستكشف
 
 مرحبا بك في مستكشف Graph ، أو كما نحب أن نسميها ، بوابتك اللامركزية في عالم subgraphs وبيانات الشبكة. 👩🏽‍🚀 مستكشف TheGraph يتكون من عدة اجزاء حيث يمكنك التفاعل مع مطوري Subgraphs الاخرين ، ومطوري dApp ،والمنسقين والمفهرسين، والمفوضين. للحصول على نظرة عامة حول the Graph Explorer، راجع الفيديو أدناه (أو تابع القراءة أدناه):
 
-<VideoEmbed src="https://www.youtube.com/embed/u224xf7rEBY" />
+<VideoEmbed youtube="u224xf7rEBY" />
 
 ## Subgraphs
 
diff --git a/pages/ar/querying/billing.mdx b/pages/ar/querying/billing.mdx
index 12681e85d783..4e1d752152f6 100644
--- a/pages/ar/querying/billing.mdx
+++ b/pages/ar/querying/billing.mdx
@@ -39,7 +39,7 @@ title: الفوترة على Subgraph Studio
 
 للحصول على عرض توضيحي سريع لكيفية عمل الفوترة في Subgraph Studio ، راجع الفيديو أدناه:
 
-<VideoEmbed src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
+<VideoEmbed youtube="UrfIpm-Vlgs" />
 
 ### مستخدمو Multisig
 
diff --git a/pages/en/cookbook/migrating-a-subgraph.mdx b/pages/en/cookbook/migrating-a-subgraph.mdx
index 35525ee98ddf..1b4ec8127d42 100644
--- a/pages/en/cookbook/migrating-a-subgraph.mdx
+++ b/pages/en/cookbook/migrating-a-subgraph.mdx
@@ -147,7 +147,7 @@ Remember that it's a dynamic and growing market, but how you interact with it is
 
 If you're still confused, fear not! Check out the following resources or watch our video guide on migrating subgraphs to the decentralized network below:
 
-<VideoEmbed src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
+<VideoEmbed youtube="CzdQ3dFFrjo" />
 
 - [The Graph Network Contracts](https://github.com/graphprotocol/contracts)
 - [Curation Contract](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - the underlying contract that the GNS wraps around
diff --git a/pages/en/deploying/subgraph-studio.mdx b/pages/en/deploying/subgraph-studio.mdx
index 3b6e08c5fca5..32efb4593a6e 100644
--- a/pages/en/deploying/subgraph-studio.mdx
+++ b/pages/en/deploying/subgraph-studio.mdx
@@ -66,7 +66,7 @@ If you’d like to test your subgraph before publishing it to the network, you c
 
 You’ve made it this far - congrats! Publishing your subgraph means that an IPFS hash was generated when you deployed the subgraph within the CLI and is stored in the network’s Ethereum smart contracts. In order to publish your subgraph successfully, you’ll need to go through the following steps outlined in this [blog](https://thegraph.com/blog/building-with-subgraph-studio). Check out the video overview below as well:
 
-<VideoEmbed src="https://www.youtube.com/embed/HfDgC2oNnwo" />
+<VideoEmbed youtube="HfDgC2oNnwo" />
 
 Remember, while you’re going through your publishing flow, you’ll be able to push to either mainnet or Rinkeby, the testnet we support. If you’re a first-time subgraph developer, we highly suggest you start with publishing to Rinkeby, which is free to do. This will allow you to see how the subgraph will work in The Graph Explorer and will allow you to test curation elements.
 
diff --git a/pages/en/network/curating.mdx b/pages/en/network/curating.mdx
index 8f580e00c893..ca7fd3f1d637 100644
--- a/pages/en/network/curating.mdx
+++ b/pages/en/network/curating.mdx
@@ -93,4 +93,4 @@ Curation shares cannot be "bought" or "sold" like other ERC20 tokens that you ma
 
 Still confused? Check out our Curation video guide below:
 
-<VideoEmbed src="https://www.youtube.com/embed/VytTEcf0dxQ" />
+<VideoEmbed youtube="VytTEcf0dxQ" />
diff --git a/pages/en/network/delegating.mdx b/pages/en/network/delegating.mdx
index c7d764530762..4a6d6e00b73e 100644
--- a/pages/en/network/delegating.mdx
+++ b/pages/en/network/delegating.mdx
@@ -95,4 +95,4 @@ At times, attempts to delegate to indexers via MetaMask can fail and result in p
 
 This guide provides a full review of this document, and how to consider everything in this document while interacting with the UI.
 
-<VideoEmbed src="https://www.youtube.com/embed/2G7S2gdURdc" />
+<VideoEmbed youtube="2G7S2gdURdc" />
diff --git a/pages/en/network/explorer.mdx b/pages/en/network/explorer.mdx
index 5ec256c89b34..1d2ae5788a21 100644
--- a/pages/en/network/explorer.mdx
+++ b/pages/en/network/explorer.mdx
@@ -4,7 +4,7 @@ title: Graph Explorer
 
 Welcome to the Graph Explorer, or as we like to call it, your decentralized portal into the world of subgraphs and network data. 👩🏽‍🚀 The Graph Explorer consists of multiple parts where you can interact with other subgraph developers, dapp developers, Curators, Indexers, and Delegators. For a general overview of the Graph Explorer, check out the video below (or keep reading below):
 
-<VideoEmbed src="https://www.youtube.com/embed/u224xf7rEBY" />
+<VideoEmbed youtube="u224xf7rEBY" />
 
 ## Subgraphs
 
diff --git a/pages/en/querying/billing.mdx b/pages/en/querying/billing.mdx
index 33fd5d4a057f..9c939670d0d8 100644
--- a/pages/en/querying/billing.mdx
+++ b/pages/en/querying/billing.mdx
@@ -39,7 +39,7 @@ There are 4 states your invoice can be in:
 
 For a quick demo of how billing works on the Subgraph Studio, check out the video below:
 
-<VideoEmbed src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
+<VideoEmbed youtube="UrfIpm-Vlgs" />
 
 ### Multisig Users
 
diff --git a/pages/es/cookbook/migrating-a-subgraph.mdx b/pages/es/cookbook/migrating-a-subgraph.mdx
index d3e9872528c9..96cc1ea58990 100644
--- a/pages/es/cookbook/migrating-a-subgraph.mdx
+++ b/pages/es/cookbook/migrating-a-subgraph.mdx
@@ -147,7 +147,7 @@ Remember that it's a dynamic and growing market, but how you interact with it is
 
 If you're still confused, fear not! Check out the following resources or watch our video guide on migrating subgraphs to the decentralized network below:
 
-<VideoEmbed src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
+<VideoEmbed youtube="CzdQ3dFFrjo" />
 
 - [The Graph Network Contracts](https://github.com/graphprotocol/contracts)
 - [Curation Contract](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - the underlying contract that the GNS wraps around
diff --git a/pages/es/deploying/subgraph-studio.mdx b/pages/es/deploying/subgraph-studio.mdx
index 7c11aaf019a5..9dc45616ef4e 100644
--- a/pages/es/deploying/subgraph-studio.mdx
+++ b/pages/es/deploying/subgraph-studio.mdx
@@ -66,7 +66,7 @@ If you’d like to test your subgraph before publishing it to the network, you c
 
 You’ve made it this far - congrats! Publishing your subgraph means that an IPFS hash was generated when you deployed the subgraph within the CLI and is stored in the network’s Ethereum smart contracts. In order to publish your subgraph successfully, you’ll need to go through the following steps outlined in this [blog](https://thegraph.com/blog/building-with-subgraph-studio). Check out the video overview below as well:
 
-<VideoEmbed src="https://www.youtube.com/embed/HfDgC2oNnwo" />
+<VideoEmbed youtube="HfDgC2oNnwo" />
 
 Remember, while you’re going through your publishing flow, you’ll be able to push to either mainnet or Rinkeby, the testnet we support. If you’re a first time subgraph developer, we highly suggest you start with publishing to Rinkeby, which is free to do. This will allow you to see how the subgraph will work in The Graph Explorer and will allow you to test curation elements.
 
diff --git a/pages/es/network/curating.mdx b/pages/es/network/curating.mdx
index 270ca1b3befb..f7f01588d9f1 100644
--- a/pages/es/network/curating.mdx
+++ b/pages/es/network/curating.mdx
@@ -93,4 +93,4 @@ Las participaciones de un curador no se pueden "comprar" o "vender" como otros t
 
 ¿Sigues confundido? Te invitamos a echarle un vistazo a nuestra guía en un vídeo que aborda todo sobre la curación:
 
-<VideoEmbed src="https://www.youtube.com/embed/VytTEcf0dxQ" />
+<VideoEmbed youtube="VytTEcf0dxQ" />
diff --git a/pages/es/network/delegating.mdx b/pages/es/network/delegating.mdx
index f5252346b9ea..470cd63c9b01 100644
--- a/pages/es/network/delegating.mdx
+++ b/pages/es/network/delegating.mdx
@@ -96,4 +96,4 @@ A veces, los intentos de delegar a los Indexadores a través de MetaMask pueden
 
 Esta guía proporciona una revisión completa de este documento, y cómo tener en cuenta todo lo que contiene mientras se interactúa con la interfaz de usuario.
 
-<VideoEmbed src="https://www.youtube.com/embed/2G7S2gdURdc" />
+<VideoEmbed youtube="2G7S2gdURdc" />
diff --git a/pages/es/network/explorer.mdx b/pages/es/network/explorer.mdx
index 268877b0afca..65318a4279d1 100644
--- a/pages/es/network/explorer.mdx
+++ b/pages/es/network/explorer.mdx
@@ -4,7 +4,7 @@ title: Graph Explorer
 
 Bienvenido al explorador de The Graph, o como nos gusta llamarlo, tu portal descentralizado al mundo de los subgrafos y los datos de la red. 👩🏽‍🚀 Este explorador de The Graph consta de varias partes en las que puedes interactuar con otros desarrolladores de subgrafos, desarrolladores de dApp, Curadores, Indexadores y Delegadores. Para obtener una descripción general de The Graph Explorer, échale un vistazo al siguiente video (o sigue leyendo lo que hemos escrito para ti):
 
-<VideoEmbed src="https://www.youtube.com/embed/u224xf7rEBY" />
+<VideoEmbed youtube="u224xf7rEBY" />
 
 ## Subgrafos
 
diff --git a/pages/es/querying/billing.mdx b/pages/es/querying/billing.mdx
index df1ee47cc237..a84bc9beefe7 100644
--- a/pages/es/querying/billing.mdx
+++ b/pages/es/querying/billing.mdx
@@ -39,7 +39,7 @@ Hay 4 estados en los que puede estar tu factura:
 
 Si quieres ver una demostración rápida de cómo funciona la facturación en Subgraph Studio, mira el siguiente video:
 
-<VideoEmbed src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
+<VideoEmbed youtube="UrfIpm-Vlgs" />
 
 ### Usuarios Multisig
 
diff --git a/pages/ja/cookbook/migrating-a-subgraph.mdx b/pages/ja/cookbook/migrating-a-subgraph.mdx
index f17e23e9b62b..cc8b83322f7d 100644
--- a/pages/ja/cookbook/migrating-a-subgraph.mdx
+++ b/pages/ja/cookbook/migrating-a-subgraph.mdx
@@ -147,7 +147,7 @@ The Graph Network が真の意味で分散化されるためには、プロト
 
 まだよくわからないという方も、ご安心ください。以下のリソースをチェックしたり、分散型ネットワークへのサブグラフの移行に関するビデオガイドをご覧ください:
 
-<VideoEmbed src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
+<VideoEmbed youtube="CzdQ3dFFrjo" />
 
 - [The Graph Network のコントラクト](https://github.com/graphprotocol/contracts)
 - [キュレーションコントラクト](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - GNS が包括する基本的なコントラクト
diff --git a/pages/ja/deploying/subgraph-studio.mdx b/pages/ja/deploying/subgraph-studio.mdx
index e437320bd8de..9367803791c6 100644
--- a/pages/ja/deploying/subgraph-studio.mdx
+++ b/pages/ja/deploying/subgraph-studio.mdx
@@ -66,7 +66,7 @@ The Graph Network の機能やネットワークは順次追加されていき
 
 ここまで来ました - おめでとうございます。サブグラフの公開とは、CLI 内でサブグラフを展開した際に IPFS ハッシュが生成され、ネットワークの Ethereum スマートコントラクトに保存されることを意味します。サブグラフの公開を成功させるためには、この[ブログ](https://thegraph.com/blog/building-with-subgraph-studio)で紹介している以下のステップを踏む必要があります。以下のビデオ概要もチェックしてみてください。
 
-<VideoEmbed src="https://www.youtube.com/embed/HfDgC2oNnwo" />
+<VideoEmbed youtube="HfDgC2oNnwo" />
 
 公開する際には、メインネットまたはテストネットである Rinkeby のどちらかに公開することができます。初めてサブグラフを開発される方は、まず Rinkeby への公開から始めることをお勧めします。これにより、サブグラフが The Graph Explorer でどのように動作するかを確認することができ、キュレーション要素をテストすることができます。
 
diff --git a/pages/ja/network/curating.mdx b/pages/ja/network/curating.mdx
index ffcc5268c359..b8ea4b089d41 100644
--- a/pages/ja/network/curating.mdx
+++ b/pages/ja/network/curating.mdx
@@ -93,4 +93,4 @@ The Graph の場合は、 [Bancor が実装しているボンディングカー
 
 まだ不明点がありますか？ その他の不明点に関しては、 以下のキュレーションビデオガイドをご覧ください：
 
-<VideoEmbed src="https://www.youtube.com/embed/VytTEcf0dxQ" />
+<VideoEmbed youtube="VytTEcf0dxQ" />
diff --git a/pages/ja/network/delegating.mdx b/pages/ja/network/delegating.mdx
index b3992df96aec..ae68ff250e26 100644
--- a/pages/ja/network/delegating.mdx
+++ b/pages/ja/network/delegating.mdx
@@ -94,4 +94,4 @@ At times, attempts to delegate to indexers via MetaMask can fail and result in p
 
 This guide provides a full review of this document, and how to consider everything in this document while interacting with the UI.
 
-<VideoEmbed src="https://www.youtube.com/embed/2G7S2gdURdc" />
+<VideoEmbed youtube="2G7S2gdURdc" />
diff --git a/pages/ja/network/explorer.mdx b/pages/ja/network/explorer.mdx
index fada66a06f45..c4a9e06c84db 100644
--- a/pages/ja/network/explorer.mdx
+++ b/pages/ja/network/explorer.mdx
@@ -4,7 +4,7 @@ title: エクスプローラー
 
 グラフエクスプローラーは、サブグラフとネットワークデータの世界への分散型ポータルです。 👩🏽‍🚀 グラフエクスプローラーは、他のサブグラフ開発者、dapp 開発者、キュレーター、インデクサー、デリゲーターと交流できる複数のパートで構成されています。 グラフエクスプローラーの概要については、以下のビデオをご覧ください。
 
-<VideoEmbed src="https://www.youtube.com/embed/u224xf7rEBY" />
+<VideoEmbed youtube="u224xf7rEBY" />
 
 ## サブグラフ
 
diff --git a/pages/ja/querying/billing.mdx b/pages/ja/querying/billing.mdx
index 78c5273cbdf7..1948e00afed2 100644
--- a/pages/ja/querying/billing.mdx
+++ b/pages/ja/querying/billing.mdx
@@ -39,7 +39,7 @@ title: サブグラフスタジオでの課金
 
 Subgraph Studio 上での課金機能のデモについては、以下のビデオをご覧ください:
 
-<VideoEmbed src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
+<VideoEmbed youtube="UrfIpm-Vlgs" />
 
 ### マルチシグユーザー
 
diff --git a/pages/ko/cookbook/migrating-a-subgraph.mdx b/pages/ko/cookbook/migrating-a-subgraph.mdx
index 931584cc50bc..f8cc5e1bbd77 100644
--- a/pages/ko/cookbook/migrating-a-subgraph.mdx
+++ b/pages/ko/cookbook/migrating-a-subgraph.mdx
@@ -147,7 +147,7 @@ While you get to decide on your query budget, there is no guarantee that an Inde
 
 If you're still confused, fear not! Check out the following resources or watch our video guide on migrating subgraphs to the decentralized network below:
 
-<VideoEmbed src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
+<VideoEmbed youtube="CzdQ3dFFrjo" />
 
 - [The Graph Network Contracts](https://github.com/graphprotocol/contracts)
 - [Curation Contract](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - the underlying contract that the GNS wraps around
diff --git a/pages/ko/deploying/subgraph-studio.mdx b/pages/ko/deploying/subgraph-studio.mdx
index 26978f0a504b..e228985d5ff8 100644
--- a/pages/ko/deploying/subgraph-studio.mdx
+++ b/pages/ko/deploying/subgraph-studio.mdx
@@ -66,7 +66,7 @@ The Graph 네트워크는 아직 호스팅 서비스에서 사용할 수 있는
 
 여러분은 여기까지 왔습니다. 축하드립니다! 서브그래프를 게시한다는 것은 CLI 내에서 서브그래프를 배포할 때 IPFS 해시가 생성되었고, 네트워크의 이더리움 스마트 컨트랙트에 저장되었음을 의미합니다. 서브그래프를 성공적으로 게시하려면 [이 블로그](https://thegraph.com/blog/building-with-subgraph-studio)에 설명된 다음 단계를 거쳐야 합니다. 아래의 비디오 개요도 확인하시기 바랍니다.
 
-<VideoEmbed src="https://www.youtube.com/embed/HfDgC2oNnwo" />
+<VideoEmbed youtube="HfDgC2oNnwo" />
 
 퍼블리싱 플로우를 진행하는 동안 메인넷이나 우리가 지원하는 테스트넷인 Rinkeby로 푸시할 수 있음을 기억하시기 바랍니다. 서브그래프 개발자가 처음이라면 무료인 Rinkeby에 퍼블리싱하는 것으로 시작하는 것이 좋습니다. 이를 통해 그래프 탐색기에서 서브그래프가 어떻게 작동하는지 확인하고 큐레이션 요소를 테스트할 수 있습니다.
 
diff --git a/pages/ko/network/curating.mdx b/pages/ko/network/curating.mdx
index ad32dd12dd18..9ba0177268d5 100644
--- a/pages/ko/network/curating.mdx
+++ b/pages/ko/network/curating.mdx
@@ -93,4 +93,4 @@ title: 큐레이팅
 
 아직도 혼란스러우신가요? 아래의 큐레이션 비디오 가이드를 확인해보시길 바랍니다.
 
-<VideoEmbed src="https://www.youtube.com/embed/VytTEcf0dxQ" />
+<VideoEmbed youtube="VytTEcf0dxQ" />
diff --git a/pages/ko/network/delegating.mdx b/pages/ko/network/delegating.mdx
index 7b19d2ea537d..502402816ceb 100644
--- a/pages/ko/network/delegating.mdx
+++ b/pages/ko/network/delegating.mdx
@@ -92,4 +92,4 @@ At times, attempts to delegate to indexers via MetaMask can fail and result in p
 
 This guide provides a full review of this document, and how to consider everything in this document while interacting with the UI.
 
-<VideoEmbed src="https://www.youtube.com/embed/2G7S2gdURdc" />
+<VideoEmbed youtube="2G7S2gdURdc" />
diff --git a/pages/ko/network/explorer.mdx b/pages/ko/network/explorer.mdx
index c3a84dfa516b..fcc5c7bf5bea 100644
--- a/pages/ko/network/explorer.mdx
+++ b/pages/ko/network/explorer.mdx
@@ -4,7 +4,7 @@ title: 탐색기
 
 그래프 탐색기, 혹은 우리가 흔히 부르는 것 처럼, 서브그래프와 네트워크 데이터의 세계로 향하는 탈중앙화 포탈에 오신것을 환영합니다! 그래프 탐색기는 다른 서브그래프 개발자, dapp 개발자, 큐레이터, 인덱서 및 위임자와 상호 작용할 수 있는 다양한 부분들로 구성됩니다. 그래프 탐색기에 대한 일반적인 개요를 알아보기 위해 아래의 비디오를 확인하세요.
 
-<VideoEmbed src="https://www.youtube.com/embed/u224xf7rEBY" />
+<VideoEmbed youtube="u224xf7rEBY" />
 
 ## 서브그래프
 
diff --git a/pages/ko/querying/billing.mdx b/pages/ko/querying/billing.mdx
index f4e4d6b50e8b..29f5a7be17a0 100644
--- a/pages/ko/querying/billing.mdx
+++ b/pages/ko/querying/billing.mdx
@@ -39,7 +39,7 @@ API 키를 사용한 경우 매주 말에 이 기간 동안 생성한 쿼리 수
 
 Subgraph Studio에서 청구가 작동하는 방식에 대한 빠른 이해를 위해 아래의 비디오를 시청해 주시기 바랍니다:
 
-<VideoEmbed src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
+<VideoEmbed youtube="UrfIpm-Vlgs" />
 
 ### Multisig Users
 
diff --git a/pages/vi/cookbook/migrating-a-subgraph.mdx b/pages/vi/cookbook/migrating-a-subgraph.mdx
index 1cf214fb2cc4..07e2092a5561 100644
--- a/pages/vi/cookbook/migrating-a-subgraph.mdx
+++ b/pages/vi/cookbook/migrating-a-subgraph.mdx
@@ -147,7 +147,7 @@ Remember that it's a dynamic and growing market, but how you interact with it is
 
 If you're still confused, fear not! Check out the following resources or watch our video guide on migrating subgraphs to the decentralized network below:
 
-<VideoEmbed src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
+<VideoEmbed youtube="CzdQ3dFFrjo" />
 
 - [The Graph Network Contracts](https://github.com/graphprotocol/contracts)
 - [Curation Contract](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - the underlying contract that the GNS wraps around
diff --git a/pages/vi/deploying/subgraph-studio.mdx b/pages/vi/deploying/subgraph-studio.mdx
index 6e61d04b0763..698c413ae811 100644
--- a/pages/vi/deploying/subgraph-studio.mdx
+++ b/pages/vi/deploying/subgraph-studio.mdx
@@ -66,7 +66,7 @@ If you’d like to test your subgraph before publishing it to the network, you c
 
 You’ve made it this far - congrats! Publishing your subgraph means that an IPFS hash was generated when you deployed the subgraph within the CLI and is stored in the network’s Ethereum smart contracts. In order to publish your subgraph successfully, you’ll need to go through the following steps outlined in this [blog](https://thegraph.com/blog/building-with-subgraph-studio). Check out the video overview below as well:
 
-<VideoEmbed src="https://www.youtube.com/embed/HfDgC2oNnwo" />
+<VideoEmbed youtube="HfDgC2oNnwo" />
 
 Remember, while you’re going through your publishing flow, you’ll be able to push to either mainnet or Rinkeby, the testnet we support. If you’re a first time subgraph developer, we highly suggest you start with publishing to Rinkeby, which is free to do. This will allow you to see how the subgraph will work in The Graph Explorer and will allow you to test curation elements.
 
diff --git a/pages/vi/network/curating.mdx b/pages/vi/network/curating.mdx
index 62131eb7ca0c..d2f33ea889af 100644
--- a/pages/vi/network/curating.mdx
+++ b/pages/vi/network/curating.mdx
@@ -93,4 +93,4 @@ Cổ phần curation không thể được "mua" hoặc "bán" như các token E
 
 Vẫn còn thắc mắc? Xem video hướng dẫn Curation của chúng tôi bên dưới:
 
-<VideoEmbed src="https://www.youtube.com/embed/VytTEcf0dxQ" />
+<VideoEmbed youtube="VytTEcf0dxQ" />
diff --git a/pages/vi/network/delegating.mdx b/pages/vi/network/delegating.mdx
index e670e28cfd32..561c82db3cdd 100644
--- a/pages/vi/network/delegating.mdx
+++ b/pages/vi/network/delegating.mdx
@@ -95,4 +95,4 @@ At times, attempts to delegate to indexers via MetaMask can fail and result in p
 
 This guide provides a full review of this document, and how to consider everything in this document while interacting with the UI.
 
-<VideoEmbed src="https://www.youtube.com/embed/2G7S2gdURdc" />
+<VideoEmbed youtube="2G7S2gdURdc" />
diff --git a/pages/vi/network/explorer.mdx b/pages/vi/network/explorer.mdx
index c980ccea95e8..3d3fd33d5d9d 100644
--- a/pages/vi/network/explorer.mdx
+++ b/pages/vi/network/explorer.mdx
@@ -4,7 +4,7 @@ title: Trình khám phá Graph
 
 Chào mừng bạn đến với Graph Explorer, hay như chúng tôi thường gọi, cổng thông tin phi tập trung của bạn vào thế giới subgraphs và dữ liệu mạng. 👩🏽‍🚀 Graph Explorer bao gồm nhiều phần để bạn có thể tương tác với các nhà phát triển subgraph khác, nhà phát triển dapp, Curators, Indexers, và Delegators. Để biết tổng quan chung về Graph Explorer, hãy xem video bên dưới (hoặc tiếp tục đọc bên dưới):
 
-<VideoEmbed src="https://www.youtube.com/embed/u224xf7rEBY" />
+<VideoEmbed youtube="u224xf7rEBY" />
 
 ## Subgraphs
 
diff --git a/pages/vi/querying/billing.mdx b/pages/vi/querying/billing.mdx
index 11d5e2b60670..5c0b7059bcd3 100644
--- a/pages/vi/querying/billing.mdx
+++ b/pages/vi/querying/billing.mdx
@@ -39,7 +39,7 @@ There are 4 states your invoice can be in:
 
 For a quick demo of how billing works on the Subgraph Studio, check out the video below:
 
-<VideoEmbed src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
+<VideoEmbed youtube="UrfIpm-Vlgs" />
 
 ### Multisig Users
 
diff --git a/pages/zh/cookbook/migrating-a-subgraph.mdx b/pages/zh/cookbook/migrating-a-subgraph.mdx
index cb74ea1452bd..29b6eaf31f05 100644
--- a/pages/zh/cookbook/migrating-a-subgraph.mdx
+++ b/pages/zh/cookbook/migrating-a-subgraph.mdx
@@ -147,7 +147,7 @@ _虽然这种机制目前在网络上运行，但社区目前正在讨论降低
 
 如果您仍然感到困惑，请不要害怕！ 查看以下资源或观看我们的视频指南，了解将子图迁移到下面的去中心化网络：
 
-<VideoEmbed src="https://www.youtube.com/embed/CzdQ3dFFrjo" />
+<VideoEmbed youtube="CzdQ3dFFrjo" />
 
 - [The Graph 网络合约](https://github.com/graphprotocol/contracts)
 - [Curation Contract](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - GNS 包裹的底层合约
diff --git a/pages/zh/deploying/subgraph-studio.mdx b/pages/zh/deploying/subgraph-studio.mdx
index f5e87ac2d7e1..d38f81803da8 100644
--- a/pages/zh/deploying/subgraph-studio.mdx
+++ b/pages/zh/deploying/subgraph-studio.mdx
@@ -66,7 +66,7 @@ The Graph 网络还不能支持所有的数据源和 托管服务上可用的功
 
 你已经做到了这一点 - 恭喜！ 发布子图意味着当您在 CLI 中部署子图时会生成 IPFS 哈希，并存储在网络的以太坊智能合约中。 为了成功发布您的子图，您需要完成此[博客](https://thegraph.com/blog/building-with-subgraph-studio)中列出的以下步骤. 还请查看下面的视频概述：
 
-<VideoEmbed src="https://www.youtube.com/embed/HfDgC2oNnwo" />
+<VideoEmbed youtube="HfDgC2oNnwo" />
 
 请记住，在您完成发布流程时，您将能够推送到我们支持的测试网主网或 Rinkeby。 如果您是第一次开发子图，我们强烈建议您从发布到 Rinkeby 开始，这是免费的。 这将允许您查看子图在 The Graph Explorer 中的工作方式，并允许您测试管理元素。
 
diff --git a/pages/zh/network/curating.mdx b/pages/zh/network/curating.mdx
index 510fe767cc23..f3658edfedb2 100644
--- a/pages/zh/network/curating.mdx
+++ b/pages/zh/network/curating.mdx
@@ -93,4 +93,4 @@ Remember that curation is risky. 请做好你的工作，确保你在你信任
 
 还有困惑吗？ 点击下面查看策展视频指导：
 
-<VideoEmbed src="https://www.youtube.com/embed/VytTEcf0dxQ" />
+<VideoEmbed youtube="VytTEcf0dxQ" />
diff --git a/pages/zh/network/delegating.mdx b/pages/zh/network/delegating.mdx
index 160f97adadbc..5b51f0f1224f 100644
--- a/pages/zh/network/delegating.mdx
+++ b/pages/zh/network/delegating.mdx
@@ -91,4 +91,4 @@ At times, attempts to delegate to indexers via MetaMask can fail and result in p
 
 This guide provides a full review of this document, and how to consider everything in this document while interacting with the UI.
 
-<VideoEmbed src="https://www.youtube.com/embed/2G7S2gdURdc" />
+<VideoEmbed youtube="2G7S2gdURdc" />
diff --git a/pages/zh/network/explorer.mdx b/pages/zh/network/explorer.mdx
index db6d05ca3878..96fff6ccfa17 100644
--- a/pages/zh/network/explorer.mdx
+++ b/pages/zh/network/explorer.mdx
@@ -4,7 +4,7 @@ title: 浏览器
 
 欢迎使用 Graph 浏览器，或者我们可以称它为您进入子图和网络数据世界的去中心化门户。 The Graph 浏览器由多个部分组成，您可以在其中与其他子图开发人员、去中心化应用开发人员、策展人、索引人和 委托人进行交互。 有关 Graph 浏览器的通用概述，请查看下面的视频（或继续阅读下面的内容）：
 
-<VideoEmbed src="https://www.youtube.com/embed/u224xf7rEBY" />
+<VideoEmbed youtube="u224xf7rEBY" />
 
 ## 子图
 
diff --git a/pages/zh/querying/billing.mdx b/pages/zh/querying/billing.mdx
index a8b82524ff59..f0f98ee080d3 100644
--- a/pages/zh/querying/billing.mdx
+++ b/pages/zh/querying/billing.mdx
@@ -39,7 +39,7 @@ title: 子图工作室的计费
 
 关于在 Subgraph Studio 上如何进行计费的快速演示，请看下面的视频。
 
-<VideoEmbed src="https://www.youtube.com/embed/UrfIpm-Vlgs" />
+<VideoEmbed youtube="UrfIpm-Vlgs" />
 
 ### 多重签名用户
 

From bd670c0c4f6f95be72fef72e17cf5dd2ac867486 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benoi=CC=82t=20Rouleau?= <benoit.rouleau@icloud.com>
Date: Tue, 9 Aug 2022 13:13:04 -0400
Subject: [PATCH 5/5] Run Prettier

---
 pages/en/developing/creating-a-subgraph.mdx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/pages/en/developing/creating-a-subgraph.mdx b/pages/en/developing/creating-a-subgraph.mdx
index bd12822a0bd5..12c034ec4f06 100644
--- a/pages/en/developing/creating-a-subgraph.mdx
+++ b/pages/en/developing/creating-a-subgraph.mdx
@@ -79,8 +79,9 @@ Options:
 The `add` command will fetch the ABI from Etherscan (unless an ABI path is specified with the `--abi` option), and will create a new `dataSource` in the same way that `graph init` command creates a `dataSource` `--from-contract`, updating the schema and mappings accordingly.
 
 The `--merge-entities` option identifies how the developer would like to handle `entity` and `event` name conflicts:
-  - If `true`: the new `dataSource` should use existing `eventHandlers` & `entities`.
-  - If `false`: a new entity & event handler should be created with `${dataSourceName}{EventName}`.
+
+- If `true`: the new `dataSource` should use existing `eventHandlers` & `entities`.
+- If `false`: a new entity & event handler should be created with `${dataSourceName}{EventName}`.
 
 The contract `address` will be written to the `networks.json` for the relevant network.