Merge pull request #3700 from dfinity/fix-video-size

fix: embedded video size and alignment

blog/news-and-updates/2024-02-28-update.mdx

@@ -25,7 +25,11 @@ Catch up on the latest episode of the ICP Developer Journey tutorial series! In
 
 Watch the video on the DFINITY YouTube channel:
 
-<iframe width="560" height="315" src="https://www.youtube.com/watch?v=-aXjKSz_oXc&list=PLuhDt1vhGcrdR2h6nPNylXKS4u8L-efvD&index=13" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+<div class="text--center">
+<p> </p>
+</div>
+<div class="text--center">
+<iframe width="660" height="415" src="https://www.youtube.com/watch?v=-aXjKSz_oXc&list=PLuhDt1vhGcrdR2h6nPNylXKS4u8L-efvD&index=13" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> </div>
 
 ## Canbench
 

docs/developer-docs/ai/ai-on-chain.mdx

@@ -16,7 +16,11 @@ ICP's unique ability to run compute at scale allows AI and neural networks to ru
 
 To showcase this capability, this demo example displays how an AI that identifies an image can be deployed as a smart contract with a frontend and backend, both running onchain.
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/6qLvIXiCGcM?si=Jf_m5JfszeNvouL9" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div class="text--center">
+<p> </p>
+</div>
+<div class="text--center">
+<iframe width="660" height="415" src="https://www.youtube.com/embed/6qLvIXiCGcM?si=Jf_m5JfszeNvouL9" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div>
 
 You can find the source code for this demo [on GitHub](https://github.com/dfinity/examples/tree/master/rust/image-classification).
 

docs/developer-docs/ai/samples.mdx

@@ -18,7 +18,11 @@ ICP's unique ability to run compute at scale allows AI and neural networks to ru
 
 To showcase this capability, this demo example displays how an AI that identifies an image can be deployed as a smart contract with a frontend and backend, both running onchain.
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/6qLvIXiCGcM?si=Jf_m5JfszeNvouL9" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div class="text--center">
+<p> </p>
+</div>
+<div class="text--center">
+<iframe width="660" height="415" src="https://www.youtube.com/embed/6qLvIXiCGcM?si=Jf_m5JfszeNvouL9" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div>
 
 You can find the source code for this demo [on GitHub](https://github.com/dfinity/examples/tree/master/rust/image-classification).
 

docs/developer-docs/daos/nns/concepts/proposals/verify-proposals.mdx

@@ -19,7 +19,11 @@ The community is encouraged to discuss proposals and their verification on the [
 If you are looking to verify [protocol canister management proposals](/docs/current/developer-docs/daos/nns/concepts/proposals/proposal-topics#Topic:-`ProtocolCanisterManagement`), you
 can refer to this video that explains the process on the example of an NNS governance canister upgrade:
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/BsIg4JZobqU?si=psrn6IViSJJ7xgnb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div class="text--center">
+<p> </p>
+</div>
+<div class="text--center">
+<iframe width="660" height="415" src="https://www.youtube.com/embed/BsIg4JZobqU?si=psrn6IViSJJ7xgnb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div>
 
 Apart from regularly checking open proposals, the following sections list some relevant information for
 proposals submitted by the DFINITY foundation.
@@ -55,7 +59,11 @@ proposals submitted by the DFINITY foundation.
 If you are looking to verify [IC OS version election proposals](/docs/current/developer-docs/daos/nns/concepts/proposals/proposal-topics#Topic:-`IcOsVersionElection`), you
 can refer to this video:
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/z3rAQBkO8uI?si=AcIaAl51UN4bppIX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div class="text--center">
+<p> </p>
+</div>
+<div class="text--center">
+<iframe width="660" height="415" src="https://www.youtube.com/embed/z3rAQBkO8uI?si=AcIaAl51UN4bppIX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div>
 
 You can also consider the following information for proposals submitted by the DFINITY foundation:
 
@@ -129,7 +137,11 @@ If you are looking to verify [service nervous system management proposals](/docs
 you can refer to this video that explains the process using an example of an NNS proposal that elects a new SNS
 governance Wasm:
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/i_ANhb0E1Io?si=BXPTalE8lnBQwuBg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div class="text--center">
+<p> </p>
+</div>
+<div class="text--center">
+<iframe width="660" height="415" src="https://www.youtube.com/embed/i_ANhb0E1Io?si=BXPTalE8lnBQwuBg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div>
 
 
 Apart from regularly checking open proposals, here some relevant information for proposals submitted by the DFINITY foundation.
@@ -143,7 +155,11 @@ The SNS also uses the ICRC ledger suite, which you can find in [the ledger suite
 ## Verify application canister management proposals
 If you are looking to verify [application canister management proposals](/docs/current/developer-docs/daos/nns/concepts/proposals/proposal-topics#Topic:-`ApplicationCanisterManagement`), you can refer to this video that explains the process on the example of an NNS frontend dapp upgrade proposal:
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/J-aJFJ_4zIw?si=e6_iWReqaamEaVYO" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div class="text--center">
+<p> </p>
+</div>
+<div class="text--center">
+<iframe width="660" height="415" src="https://www.youtube.com/embed/J-aJFJ_4zIw?si=e6_iWReqaamEaVYO" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div>
 
 Apart from regularly checking open proposals, the following sections list some relevant information for proposals submitted by the DFINITY foundation.
 

docs/developer-docs/daos/nns/overview.mdx

@@ -9,7 +9,11 @@ import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
 <MarkdownChipRow labels={["Beginner", "Governance" ]} />
 
 ## Overview
-<iframe width="560" height="315" src="https://www.youtube.com/embed/1uX-fRgvXjU?si=VAYJNj7ecJsrfxPb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div class="text--center">
+<p> </p>
+</div>
+<div class="text--center">
+<iframe width="660" height="415" src="https://www.youtube.com/embed/1uX-fRgvXjU?si=VAYJNj7ecJsrfxPb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div>
 
 The Network Nervous System (NNS) is the fully onchain decentralized autonomous organization (DAO) that governs the Internet Computer Protocol.
 It is a stake-based, open governance system where everyone can participate by staking some ICP utility tokens.

docs/developer-docs/daos/nns/using-the-nns-dapp/nns-app-quickstart.mdx

@@ -28,7 +28,11 @@ and how to participate in voting either by [voting manually](/docs/current/devel
 ## Connect to the NNS DAO using the NNS dapp
 
 To connect to the NNS using the Network Nervous System (NNS) dapp, follow these steps which are also explained in the first minutes of this video.
-<iframe width="560" height="315" src="https://www.youtube.com/embed/XU54fbCzFmE?si=NU3rq9Pz7GlGW3ar" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div class="text--center">
+<p> </p>
+</div>
+<div class="text--center">
+<iframe width="660" height="415" src="https://www.youtube.com/embed/XU54fbCzFmE?si=NU3rq9Pz7GlGW3ar" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div>
 
 - #### Step 1:  Open a browser and navigate to the [Network Nervous System (NNS)](https://nns.ic0.app) dapp.
 

docs/developer-docs/daos/nns/using-the-nns-dapp/nns-dapp-following-other-neurons.mdx

@@ -9,7 +9,11 @@ import '/src/components/CenterImages/center.scss';
 
 <MarkdownChipRow labels={["Beginner", "Governance", "Tutorial"]} />
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/6BznC9p3w8w?si=m7nc7xTGq5YUtXa3" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div class="text--center">
+<p> </p>
+</div>
+<div class="text--center">
+<iframe width="660" height="415" src="https://www.youtube.com/embed/6BznC9p3w8w?si=m7nc7xTGq5YUtXa3" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div>
 
 ## Overview
 Neuron owners may find it hard to manually vote on every proposal submitted to the NNS.

docs/developer-docs/daos/nns/using-the-nns-dapp/nns-dapp-importing-tokens.mdx

@@ -9,7 +9,11 @@ import '/src/components/CenterImages/center.scss';
 
 <MarkdownChipRow labels={["Beginner", "Governance", "Tutorial"]} />
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/zcXmarBk2L4?si=OIxq9LwY0DLzHvE1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div class="text--center">
+<p> </p>
+</div>
+<div class="text--center">
+<iframe width="660" height="415" src="https://www.youtube.com/embed/zcXmarBk2L4?si=OIxq9LwY0DLzHvE1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div>
 
 ## Overview
 

docs/developer-docs/daos/nns/using-the-nns-dapp/nns-dapp-manage-quill-neurons.mdx

@@ -9,7 +9,11 @@ import '/src/components/CenterImages/center.scss';
 
 <MarkdownChipRow labels={["Intermediate", "Governance", "Tutorial"]} />
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/lKbYUmqF7J4?si=jIvx5rEza7BnMchE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div class="text--center">
+<p> </p>
+</div>
+<div class="text--center">
+<iframe width="660" height="415" src="https://www.youtube.com/embed/lKbYUmqF7J4?si=jIvx5rEza7BnMchE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div>
 
 ## Overview
 You may have neurons controlled by a principal ID that was created using [quill](../../../../../../docs/current/developer-docs/developer-tools/cli-tools/quill-cli-reference/quill-parent). In this case, it may be inconvenient to manage your neurons through the terminal. If you know the seed phrase of this principal ID, you can use a Ledger hardware wallet to manage your neurons through the [NNS dapp](https://nns.ic0.app/).
@@ -25,7 +29,7 @@ To follow this process, you may want to set up a new Ledger device. If you do, s
 - **Step 2**: Type in your PIN to reset your Ledger device.
 
 :::caution
-**Warning**: This process will reset the private key of your Ledger device. **You will no longer have access to digital assets you hold on this device.** 
+**Warning**: This process will reset the private key of your Ledger device. **You will no longer have access to digital assets you hold on this device.**
 
 While you can always regain access by resetting the device with its current seed phrase, you may want to use a new Ledger device to continue. In general, it is advised to securely store your seed phrase.
 :::

docs/developer-docs/daos/nns/using-the-nns-dapp/nns-dapp-send-and-receive-tokens.mdx

@@ -16,7 +16,11 @@ This also the first step required for staking a neuron with the NNS dapp.
 
 ## Get tokens from an exchange
 If you already have ICP tokens on an exchange, you can transfer some of them to your NNS dapp account as explained in this video:
-<iframe width="560" height="315" src="https://www.youtube.com/embed/XU54fbCzFmE?si=NU3rq9Pz7GlGW3ar" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div class="text--center">
+<p> </p>
+</div>
+<div class="text--center">
+<iframe width="660" height="415" src="https://www.youtube.com/embed/XU54fbCzFmE?si=NU3rq9Pz7GlGW3ar" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div>
 
 - #### Step 1: Open one of your accounts in the ICP wallet.
 

docs/developer-docs/daos/nns/using-the-nns-dapp/nns-dapp-staking-a-neuron.mdx

@@ -25,7 +25,11 @@ vote on proposals, and create canisters on the Internet Computer.
 
 Neurons are required to participate in governance to earn rewards. To create a neuron, you must lock up some number of ICP utility tokens for a period of time.
 The minimum stake required to create a neuron is 1 ICP utility token. You can configure the period of time the stake is locked from 6 months up to a maximum of 8 years.
-<iframe width="560" height="315" src="https://www.youtube.com/embed/3o0eBOaHP_4?si=k7vR9eulGzK_iLiY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div class="text--center">
+<p> </p>
+</div>
+<div class="text--center">
+<iframe width="660" height="415" src="https://www.youtube.com/embed/3o0eBOaHP_4?si=k7vR9eulGzK_iLiY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div>
 
 To stake ICP utility tokens:
 

docs/developer-docs/daos/nns/using-the-nns-dapp/nns-dapp-voting-on-proposals.mdx

@@ -9,7 +9,11 @@ import '/src/components/CenterImages/center.scss';
 
 <MarkdownChipRow labels={["Beginner", "Governance", "Tutorial"]} />
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/TGY6AF110e8?si=D3xFV1fq9bzUO4is" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div class="text--center">
+<p> </p>
+</div>
+<div class="text--center">
+<iframe width="660" height="415" src="https://www.youtube.com/embed/TGY6AF110e8?si=D3xFV1fq9bzUO4is" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div>
 
 Active participation in governance is an important factor in the long-term health of the Internet Computer and participants receive voting rewards.
 

docs/developer-docs/defi/wallets/self-custody/hardware-wallet-cli.mdx

@@ -76,7 +76,11 @@ The hardware wallet CLI tool supports the following commands and options:
 
 ## Staking ICP with a hardware wallet
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/0-nSOBC3bxE?si=OWvwdVfCymtvd97W" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div class="text--center">
+<p> </p>
+</div>
+<div class="text--center">
+<iframe width="660" height="415" src="https://www.youtube.com/embed/0-nSOBC3bxE?si=OWvwdVfCymtvd97W" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div>
 
 - #### Step 1: Connect the Ledger device to your computer and [configure the device using the instructions above](#ledger-nano-device-setup).
 
@@ -104,7 +108,11 @@ For additional information about using hardware wallets for staking neurons, che
 
 ## Connecting the NNS to a neuron created with quill
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/lKbYUmqF7J4?si=q-tclOeUpjIM87yR" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div class="text--center">
+<p> </p>
+</div>
+<div class="text--center">
+<iframe width="660" height="415" src="https://www.youtube.com/embed/lKbYUmqF7J4?si=q-tclOeUpjIM87yR" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div>
 
 - #### Step 1: Connect the Ledger device to your computer. Recover the identity you used with [quill on the device](/docs/current/developer-docs/developer-tools/cli-tools/quill-cli-reference/quill-generate), or configure quill to use the identity already on the device.