Merge pull request #8726 from supabase/dng-docs-storage-videos

Add Storage overview video

apps/reference/docs/guides/storage.mdx

@@ -8,8 +8,6 @@ sidebar_label: Overview
 import Tabs from '@theme/Tabs'
 import TabItem from '@theme/TabItem'
 
-## Overview
-
 Supabase Storage makes it simple to store and serve large files.
 
 ### Files
@@ -28,16 +26,27 @@ Buckets are distinct containers for files and folders. You can think of them lik
 Generally you would create distinct buckets for different Security and Access Rules. For example, you might
 keep all public files in a "public" bucket, and other files that require logged-in access in a "restricted" bucket.
 
+<div class="video-container">
+  <iframe
+    src="https://www.youtube-nocookie.com/embed/J9mTPY8rIXE"
+    frameBorder="1"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowFullScreen
+  ></iframe>
+</div>
+
 ## Getting started
 
 This is a quick guide that shows the basic functionality of Supabase Storage. Find a full
 [example application in GitHub](https://github.com/supabase/examples/tree/main/supabase-js-v1/user-management/nextjs-ts-user-management),
 which you can deploy yourself.
 
-**Note before begin** : File, Folder, and Bucket names **must follow** [AWS Safe Characters naming guideline](https://docs.aws.amazon.com/AmazonS3/latest/userguide/object-keys.html) and avoid use of any other characters
-
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fsupabase%2Fsupabase%2Ftree%2Fmaster%2Fexamples%2Fnextjs-ts-user-management&project-name=supabase-user-management&repository-name=supabase-user-management&demo-title=Supabase%20User%20Management&demo-description=An%20example%20web%20app%20using%20Supabase%20and%20Next.js&demo-url=https%3A%2F%2Fsupabase-nextjs-ts-user-management.vercel.app&demo-image=https%3A%2F%2Fi.imgur.com%2FZ3HkQqe.png&integration-ids=oac_jUduyjQgOyzev1fjrW83NYOv&external-id=nextjs-user-management)
 
+:::note
+File, Folder, and Bucket names **must follow** [AWS object key naming guidelines](https://docs.aws.amazon.com/AmazonS3/latest/userguide/object-keys.html) and avoid use of any other characters.
+:::
+
 ### Create a bucket
 
 You can create a bucket using the Supabase Dashboard.
@@ -59,15 +68,6 @@ client libraries. Here we create a bucket called "avatars":
 2. Click **New Bucket** and enter a name for the bucket.
 3. Click **Create Bucket**.
 
-<video width="99%" muted playsInline controls="true">
-  <source
-    src="/docs/videos/storage/create.mp4"
-    type="video/mp4"
-    muted
-    playsInline
-  />
-</video>
-
 </TabItem>
 <TabItem value="sql">
 
@@ -126,15 +126,6 @@ You can upload a file from the Dashboard, or within a browser using our JS libra
 3. Click **Upload File**.
 4. Select the file you want to upload.
 
-<video width="99%" muted playsInline controls="true">
-  <source
-    src="/docs/videos/storage/upload.mp4"
-    type="video/mp4"
-    muted
-    playsInline
-  />
-</video>
-
 </TabItem>
 <TabItem value="javascript">
 
@@ -186,15 +177,6 @@ You can download a file from the Dashboard, or within a browser using our JS lib
 3. Select the file that you want to download.
 4. Click **Download**.
 
-<video width="99%" muted playsInline controls="true">
-  <source
-    src="/docs/videos/storage/download.mp4"
-    type="video/mp4"
-    muted
-    playsInline
-  />
-</video>
-
 </TabItem>
 <TabItem value="javascript">
 
@@ -245,15 +227,6 @@ To restrict access to your files you can use either the Dashboard or SQL.
 5. Give your policy a unique name.
 6. Write the policy using SQL.
 
-<video width="99%" muted playsInline controls="true">
-  <source
-    src="/docs/videos/storage/policies.mp4"
-    type="video/mp4"
-    muted
-    playsInline
-  />
-</video>
-
 </TabItem>
 <TabItem value="sql">
 
@@ -291,7 +264,7 @@ You can access the storage API directly with the same endpoint. See the <a href=
 
 ---
 
-## Access Control
+## Access control
 
 Supabase Storage is integrated with your [Postgres Database](/docs/guides/database).
 This means that you can use the same [Row Level Security Policies](/docs/guides/auth#policies)
@@ -355,7 +328,7 @@ For example, if your file is stored in `public/subfolder/avatar.png` it would re
 
 ---
 
-## Policy Examples
+## Policy examples
 
 Here are some examples of storage policies.