Replaced mermaid diagrams with videos

Author: dcpena

src/content/docs/speed/optimization/content/compression.mdx

@@ -9,32 +9,19 @@ head:
     content: Content compression | Brotli
 ---
 
-import { Render } from "~/components";
+import { Stream, Render } from "~/components";
 
 Cloudflare compresses content in two ways: between Cloudflare and your website visitors and between Cloudflare and your origin server.
 
 ## Compression between Cloudflare and website visitors
 
 In addition to Cloudflare's [default caching behavior](/cache/concepts/default-cache-behavior/), Cloudflare supports Gzip, Brotli, and Zstandard compression when delivering content to website visitors.
 
-```mermaid
-flowchart LR
-accTitle: Compressed responses sent to website visitor
-accDescr: Cloudflare can send responses to visitors using Gzip compression, Brotli compression, or no compression.
-
-A[Visitor browser]
-B((Cloudflare))
-C[(Origin server)]
-
-A == "Request" ==> B -.-> C
-C -.-> B == "Response<br>(Gzip / Brotli / Zstandard / No compression)" ==> A
-
-style A stroke-width: 2px
-style B stroke: orange,fill: orange,color: black
-style C stroke-dasharray: 5 5
-linkStyle 0,3 stroke-width: 2px
-linkStyle 1,2 stroke-width: 1px
-```
+<Stream
+  id="9103750883217fcb9274666fd57ebac1"
+  title="Content compression"
+  thumbnail="https://pub-d9bf66e086fb4b639107aa52105b49dd.r2.dev/Mermaid%20thumbnail_Content%20Compression.png"
+/>
 
 :::note
 Customers can enable Zstandard compression through [Compression Rules](/rules/compression-rules/).

src/content/docs/ssl/concepts.mdx

@@ -8,7 +8,7 @@ description: This page defines and articulates key concepts that are relevant to
   Cloudflare SSL/TLS and are used in the Cloudflare SSL/TLS documentation.
 ---
 
-import { Render } from "~/components";
+import { Stream, Render } from "~/components";
 
 This page defines and articulates key concepts that are relevant to Cloudflare SSL/TLS and are used in this documentation. For more concepts and broader descriptions, check out the [Cloudflare Learning Center](https://www.cloudflare.com/learning/ssl/what-is-ssl/).
 
@@ -22,12 +22,11 @@ Since [Cloudflare's global network](https://www.cloudflare.com/network/) is at t
 
 The [edge certificates](/ssl/edge-certificates/) are the ones that Cloudflare presents to clients visiting your website or application. You can manage edge certificates through the [Cloudflare Dashboard](https://dash.cloudflare.com/?to=/:account/:zone/ssl-tls/edge-certificates).
 
-```mermaid
-flowchart LR
-        accTitle: Edge certificate and origin certificate
-        accDescr: Diagram showing how edge certificates are positioned between Cloudflare and the browser whereas origin certificates sit between Cloudflare and the origin server.
-        A[Browser] <--Edge certificate--> B((Cloudflare))<--Origin certificate--> C[(Origin server)]
-```
+<Stream
+  id="fe9344af4ab476bf81f4447000f36db66"
+  title="SSL/TLS concepts"
+  thumbnail="https://pub-d9bf66e086fb4b639107aa52105b49dd.r2.dev/Mermaid%20thumbnail_Concepts.png"
+/>
 
 ### Origin certificate
 

src/content/docs/ssl/origin-configuration/ssl-modes/full.mdx

@@ -9,16 +9,15 @@ head:
 description: Cloudflare matches the browser request protocol when connecting to the origin. If the browser uses HTTP, Cloudflare connects to the origin via HTTP; if HTTPS, Cloudflare uses HTTPS without validating the origin’s certificate. This mode is common for origins that use self-signed or otherwise invalid certificates.
 ---
 
-import { Render, TabItem, Tabs } from "~/components";
+import { Stream, Render, TabItem, Tabs } from "~/components";
 
 When you set your encryption mode to **Full**, Cloudflare allows HTTPS connections between your visitor and Cloudflare and makes connections to the origin using the scheme requested by the visitor. If your visitor uses `http`, then Cloudflare connects to the origin using plaintext HTTP and vice versa.
 
-```mermaid
-flowchart LR
-        accTitle: Full SSL/TLS Encryption
-        accDescr: With an encryption mode of Full, your application encrypts traffic going to and coming from Cloudflare but does not validate your origin certificate.
-        A[Browser] <--Encrypted--> B((Cloudflare))<--Encrypted--> C[(Origin server)]
-```
+<Stream
+  id="5ad2c494e2def51ac5bad8ef8948b7d1"
+  title="Configure Full encryption mode"
+  thumbnail="https://pub-d9bf66e086fb4b639107aa52105b49dd.r2.dev/Mermaid%20thumbnail_Full.png"
+/>
 
 ## Use when
 

src/content/docs/ssl/origin-configuration/ssl-modes/ssl-only-origin-pull.mdx

@@ -9,7 +9,7 @@ head:
 description: Regardless of whether the browser-to-Cloudflare connection uses HTTP or HTTPS, Cloudflare always connects to the origin over HTTPS with certificate validation.
 ---
 
-import { Render, Tabs, TabItem } from "~/components";
+import { Stream, Render, Tabs, TabItem } from "~/components";
 
 :::note
 
@@ -20,12 +20,12 @@ When you set your encryption mode to **Strict (SSL-Only Origin Pull)**, connecti
 
 The certificate presented by the origin will be validated the same as with [Full (strict) mode](/ssl/origin-configuration/ssl-modes/full-strict/).
 
-```mermaid
-flowchart LR
-    accTitle: Strict (SSL-Only Origin Pull) SSL/TLS Encryption
-    accDescr: With an encryption mode of Strict (SSL-Only Origin Pull), all connections to the origin will always be made using SSL/TLS.
-    A[Browser] <--Encrypted--> B((Cloudflare))<--Encrypted--> C[("Origin server (verified) #9989;")]
-```
+<Stream
+  id="f407072cb5b4837c8c3a58a69cde90b5"
+  title="Configure Strict encryption mode"
+  thumbnail="https://pub-d9bf66e086fb4b639107aa52105b49dd.r2.dev/Mermaid%20thumbnail_Strict.png"
+/>
+
 
 ## Use when
 

src/content/docs/ssl/troubleshooting/version-cipher-mismatch.mdx

@@ -10,7 +10,7 @@ description: Learn how to troubleshoot ERR_SSL_VERSION_OR_CIPHER_MISMATCH when
   using Cloudflare SSL/TLS.
 ---
 
-import { Render } from "~/components";
+import { Stream, Render } from "~/components";
 
 After you [add a new domain](/fundamentals/manage-domains/add-site/) to Cloudflare, your visitors' browsers might display one of the following errors:
 
@@ -27,17 +27,12 @@ This error occurs when your domain or subdomain is not covered by an SSL/TLS cer
 
 ## Decision tree
 
-```mermaid
-flowchart TD
-accTitle: Troubleshooting ERR_SSL_VERSION_OR_CIPHER_MISMATCH decision tree
-A>Is your certificate active?] -- Yes --> B>Is the DNS record proxied?]
-A -- No --> C[Wait for certificate to activate or pause Cloudflare]
-B -- No --> D[Proxy the DNS record]
-B -- Yes --> E>Are you using a custom certificate?]
-E -- Yes --> F[Custom certificate may be expired]
-E -- No --> G>Are you accessing a multi-level subdomain?]
-G -- Yes --> H[Get an advanced or custom certificate]
-```
+<Stream
+  id="ff42f110f3781b88b02f36bcef96f7f8"
+  title="Manage SSL version or cipher mismatch errors"
+  thumbnail="https://pub-d9bf66e086fb4b639107aa52105b49dd.r2.dev/Mermaid%20thumbnail_Cipher.png"
+/>
+
 
 ---