From f51ecc49f69c749eb6db8c1300ae5234f2f8c783 Mon Sep 17 00:00:00 2001
From: filippoweb3 <filippo@web3.foundation>
Date: Tue, 16 Jan 2024 14:37:14 +0100
Subject: [PATCH] final edits

---
 docs/learn/learn-architecture.md  | 13 ++++++++++++-
 docs/learn/learn-auction.md       | 13 ++++++++++++-
 docs/learn/learn-crowdloans.md    | 13 ++++++++++++-
 docs/learn/learn-xcm-transport.md | 13 ++++++++++++-
 4 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/docs/learn/learn-architecture.md b/docs/learn/learn-architecture.md
index f987ff7144ac..544e9b26e9c4 100644
--- a/docs/learn/learn-architecture.md
+++ b/docs/learn/learn-architecture.md
@@ -124,4 +124,15 @@ For a video overview of the architecture of
 {{ polkadot: Polkadot :polkadot }}{{ kusama: Kusama :kusama }} watch the video below for the
 whiteboard interview with W3F researcher Alistair Stewart:
 
-[![Architecture Overview](https://img.youtube.com/vi/xBfC6uTjvbM/0.jpg)](https://www.youtube.com/watch?v=xBfC6uTjvbM)
+<div className="row">
+  <div className="col text--center">
+    <a href="https://www.youtube.com/watch?v=xBfC6uTjvbM">
+      <img src="https://img.youtube.com/vi/xBfC6uTjvbM/0.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
+    </a>
+    <p>
+      Architecture Overview
+      <br />
+      <a href="https://www.youtube.com/watch?v=xBfC6uTjvbM">» view video</a>
+    </p>
+  </div>
+</div>
diff --git a/docs/learn/learn-auction.md b/docs/learn/learn-auction.md
index 5c8d74a81de1..85dd938dd6b5 100644
--- a/docs/learn/learn-auction.md
+++ b/docs/learn/learn-auction.md
@@ -26,7 +26,18 @@ The parachain slots will be leased according to an unpermissioned
 improving security while operating on a blockchain. See [Rationale](#rationale) for additional
 details.
 
-[![A Beginner's guide to Parachain Slot Auctions](https://img.youtube.com/vi/i5-Rw2Sf7-w/0.jpg)](https://youtu.be/i5-Rw2Sf7-w)
+<div className="row">
+  <div className="col text--center">
+    <a href="https://youtu.be/i5-Rw2Sf7-w">
+      <img src="https://img.youtube.com/vi/i5-Rw2Sf7-w/0.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
+    </a>
+    <p>
+      A Beginner's guide to Parachain Slot Auctions
+      <br />
+      <a href="https://youtu.be/i5-Rw2Sf7-w">» view video</a>
+    </p>
+  </div>
+</div>
 
 ## Auction Schedule
 
diff --git a/docs/learn/learn-crowdloans.md b/docs/learn/learn-crowdloans.md
index d31048498315..e66c0c02dc41 100644
--- a/docs/learn/learn-crowdloans.md
+++ b/docs/learn/learn-crowdloans.md
@@ -19,7 +19,18 @@ If you are here for guidance on how to contribute to a crowdloan, watch the vide
 
 :::
 
-[![Crowdloans on Polkadot JS](https://img.youtube.com/vi/AA9mPANmzmU/0.jpg)](https://youtu.be/AA9mPANmzmU)
+<div className="row">
+  <div className="col text--center">
+    <a href="https://youtu.be/AA9mPANmzmU">
+      <img src="https://img.youtube.com/vi/AA9mPANmzmU/0.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
+    </a>
+    <p>
+      Crowdloans on Polkadot-JS
+      <br />
+      <a href="https://youtu.be/AA9mPANmzmU">» view video</a>
+    </p>
+  </div>
+</div>
 
 :::note Testing on Rococo
 
diff --git a/docs/learn/learn-xcm-transport.md b/docs/learn/learn-xcm-transport.md
index 3811418ea9b0..c0b9ea740b37 100644
--- a/docs/learn/learn-xcm-transport.md
+++ b/docs/learn/learn-xcm-transport.md
@@ -102,7 +102,18 @@ A tutorial on how to open an HRMP channel on a parachain can be found
 
 ### XCMP (Cross Consensus Message Passing) Design Summary
 
-[![XCMP explained](https://img.youtube.com/vi/tOnzk4AROUY/0.jpg)](https://www.youtube.com/watch?v=tOnzk4AROUY)
+<div className="row">
+  <div className="col text--center">
+    <a href="https://www.youtube.com/watch?v=tOnzk4AROUY">
+      <img src="https://img.youtube.com/vi/tOnzk4AROUY/0.jpg" width="350" style={{ borderRadius: 10, border: '1px solid slategrey' }} />
+    </a>
+    <p>
+      XCMP Explained
+      <br />
+      <a href="https://www.youtube.com/watch?v=tOnzk4AROUY">» view video</a>
+    </p>
+  </div>
+</div>
 
 :::note