chore(ia): reorg Web/Media (#37898)

* chore: move media guides

* chore: move media guides

* feat: add mediasidebar, tidy media dir

* feat: add mediasidebar

* feat: add mediasidebar

* feat: add mediasidebar

* chore: revert sidebar / fmconfig changes

* chore: revert web/html/element to resolve conflict

* chore: add mediasidebar, fix redirects

* chore: revert unrelated changes

* chore(ia): update redirects from main

* chore(ia): update manifest ref from main

* Update files/en-us/web/media/guides/audio_and_video_delivery/cross-browser_audio_basics/index.md

Co-authored-by: Vadim Makeev <hi@pepelsbey.dev>

---------

Co-authored-by: Vadim Makeev <hi@pepelsbey.dev>

files/en-us/_wikihistory.json

@@ -121927,7 +121927,7 @@
       "Bean2223"
     ]
   },
-  "Web/Media/Audio_and_video_delivery": {
+  "Web/Media/Guides/Audio_and_video_delivery": {
     "modified": "2020-12-11T05:27:12.652Z",
     "contributors": [
       "bershanskiy",
@@ -121941,7 +121941,7 @@
       "FredB"
     ]
   },
-  "Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video": {
+  "Web/Media/Guides/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video": {
     "modified": "2019-03-18T20:51:47.296Z",
     "contributors": [
       "chrisdavidmills",
@@ -121958,7 +121958,7 @@
       "MartinRinehart"
     ]
   },
-  "Web/Media/Audio_and_video_delivery/Cross-browser_audio_basics": {
+  "Web/Media/Guides/Audio_and_video_delivery/Cross-browser_audio_basics": {
     "modified": "2020-11-16T08:10:17.867Z",
     "contributors": [
       "chrisdavidmills",
@@ -121974,7 +121974,7 @@
       "maboa"
     ]
   },
-  "Web/Media/Audio_and_video_delivery/Live_streaming_web_audio_and_video": {
+  "Web/Media/Guides/Audio_and_video_delivery/Live_streaming_web_audio_and_video": {
     "modified": "2019-04-02T11:11:28.390Z",
     "contributors": [
       "kenrick95",
@@ -121990,15 +121990,15 @@
       "maboa"
     ]
   },
-  "Web/Media/Audio_and_video_delivery/Setting_up_adaptive_streaming_media_sources": {
+  "Web/Media/Guides/Audio_and_video_delivery/Setting_up_adaptive_streaming_media_sources": {
     "modified": "2019-03-18T20:51:46.989Z",
     "contributors": ["chrisdavidmills", "mfuji09", "obax", "rybi", "maboa"]
   },
-  "Web/Media/Audio_and_video_delivery/Video_player_styling_basics": {
+  "Web/Media/Guides/Audio_and_video_delivery/Video_player_styling_basics": {
     "modified": "2019-09-06T13:44:57.765Z",
     "contributors": ["agdillon", "DeltaTV", "chrisdavidmills"]
   },
-  "Web/Media/Audio_and_video_delivery/WebAudio_playbackRate_explained": {
+  "Web/Media/Guides/Audio_and_video_delivery/WebAudio_playbackRate_explained": {
     "modified": "2019-03-18T20:51:48.122Z",
     "contributors": [
       "chrisdavidmills",
@@ -122007,7 +122007,7 @@
       "teoli"
     ]
   },
-  "Web/Media/Audio_and_video_delivery/buffering_seeking_time_ranges": {
+  "Web/Media/Guides/Audio_and_video_delivery/buffering_seeking_time_ranges": {
     "modified": "2019-04-12T10:12:05.792Z",
     "contributors": [
       "industral",
@@ -122017,7 +122017,7 @@
       "maboa"
     ]
   },
-  "Web/Media/Audio_and_video_delivery/cross_browser_video_player": {
+  "Web/Media/Guides/Audio_and_video_delivery/cross_browser_video_player": {
     "modified": "2020-05-27T13:29:20.861Z",
     "contributors": [
       "rafaqf",
@@ -122033,7 +122033,7 @@
       "Ian-Devlin"
     ]
   },
-  "Web/Media/Audio_and_video_manipulation": {
+  "Web/Media/Guides/Audio_and_video_manipulation": {
     "modified": "2020-09-02T12:20:43.182Z",
     "contributors": [
       "mfuji09",
@@ -122044,11 +122044,11 @@
       "a-mt"
     ]
   },
-  "Web/Media/Autoplay_guide": {
+  "Web/Media/Guides/Autoplay": {
     "modified": "2020-10-11T23:21:36.266Z",
     "contributors": ["Malvoz", "scunliffe", "MrAlexWeber", "Sheppy"]
   },
-  "Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video": {
+  "Web/Media/Guides/DASH_Adaptive_Streaming_for_HTML_5_Video": {
     "modified": "2020-11-09T07:34:43.578Z",
     "contributors": [
       "mfuji09",
@@ -122070,11 +122070,11 @@
       "joshmoz"
     ]
   },
-  "Web/Media/Formats": {
+  "Web/Media/Guides/Formats": {
     "modified": "2019-11-15T11:45:09.792Z",
     "contributors": ["Sheppy", "jswisher", "Havi Hoffman"]
   },
-  "Web/Media/Formats/Audio_codecs": {
+  "Web/Media/Guides/Formats/Audio_codecs": {
     "modified": "2019-12-06T17:58:10.741Z",
     "contributors": [
       "slokhorst",
@@ -122084,11 +122084,11 @@
       "GiacomoSorbi"
     ]
   },
-  "Web/Media/Formats/Audio_concepts": {
+  "Web/Media/Guides/Formats/Audio_concepts": {
     "modified": "2020-06-01T18:13:20.323Z",
     "contributors": ["atd30", "Sheppy"]
   },
-  "Web/Media/Formats/Configuring_servers_for_Ogg_media": {
+  "Web/Media/Guides/Formats/Configuring_servers_for_Ogg_media": {
     "modified": "2019-09-10T19:10:12.290Z",
     "contributors": [
       "Sheppy",
@@ -122106,11 +122106,11 @@
       "sorinelpusti"
     ]
   },
-  "Web/Media/Formats/Containers": {
+  "Web/Media/Guides/Formats/Containers": {
     "modified": "2020-04-18T23:02:19.945Z",
     "contributors": ["sideshowbarker", "FFV47", "Sheppy", "mukhtar-github"]
   },
-  "Web/Media/Formats/Image_types": {
+  "Web/Media/Guides/Formats/Image_types": {
     "modified": "2020-11-08T19:25:21.989Z",
     "contributors": [
       "hamishwillee",
@@ -122124,11 +122124,11 @@
       "matthendrix"
     ]
   },
-  "Web/Media/Formats/Support_issues": {
+  "Web/Media/Guides/Formats/Support_issues": {
     "modified": "2019-08-13T12:38:59.984Z",
     "contributors": ["Sheppy"]
   },
-  "Web/Media/Formats/Video_codecs": {
+  "Web/Media/Guides/Formats/Video_codecs": {
     "modified": "2020-11-12T07:24:28.263Z",
     "contributors": [
       "chrisdavidmills",
@@ -122140,30 +122140,26 @@
       "KarlPiper"
     ]
   },
-  "Web/Media/Formats/Video_concepts": {
+  "Web/Media/Guides/Formats/Video_concepts": {
     "modified": "2020-05-08T05:39:14.735Z",
     "contributors": ["Tolokoban2", "Sheppy"]
   },
-  "Web/Media/Formats/WebRTC_codecs": {
+  "Web/Media/Guides/Formats/WebRTC_codecs": {
     "modified": "2020-08-20T11:05:40.490Z",
     "contributors": ["Sheppy", "bfamchon", "TheSpecialist4"]
   },
-  "Web/Media/Formats/codecs_parameter": {
+  "Web/Media/Guides/Formats/codecs_parameter": {
     "modified": "2020-11-09T17:29:24.908Z",
     "contributors": ["lucaswerkmeister", "leela52452", "Sheppy", "pehrsons"]
   },
-  "Web/Media/HTML_media": {
-    "modified": "2020-01-27T09:41:23.530Z",
-    "contributors": ["germain", "rachelandrew", "Sheppy"]
+  "Web/Media/Guides/Images": {
+    "modified": "2020-07-28T00:42:48.458Z",
+    "contributors": ["lbd1607", "Sheppy", "rachelandrew"]
   },
-  "Web/Media/Streaming": {
+  "Web/Media/Guides/Streaming": {
     "modified": "2020-10-12T00:53:55.010Z",
     "contributors": ["krankj", "catecate", "Sheppy"]
   },
-  "Web/Media/images": {
-    "modified": "2020-07-28T00:42:48.458Z",
-    "contributors": ["lbd1607", "Sheppy", "rachelandrew"]
-  },
   "Web/OpenSearch": {
     "modified": "2019-10-30T22:44:38.715Z",
     "contributors": [

files/en-us/glossary/alpha/index.md

@@ -18,7 +18,7 @@ As you can see, the color without an alpha channel completely blocks the backgro
 
 - [CSS colors](/en-US/docs/Web/CSS/CSS_colors)
 - [Learn: Values and units](/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units)
-- [Image file type and format guide](/en-US/docs/Web/Media/Formats/Image_types)
+- [Image file type and format guide](/en-US/docs/Web/Media/Guides/Formats/Image_types)
 - [Alpha compositing](https://en.wikipedia.org/wiki/Alpha_compositing) on Wikipedia
 - [RGBA color model](https://en.wikipedia.org/wiki/RGBA_color_model) on Wikipedia
 - [Channel (digital image)](<https://en.wikipedia.org/wiki/Channel_(digital_image)>) on Wikipedia

files/en-us/glossary/codec/index.md

@@ -11,6 +11,6 @@ A **codec** (a blend word derived from "**co**der-**dec**oder") is a program, al
 ## See also
 
 - [Codec](https://en.wikipedia.org/wiki/Codec) on Wikipedia
-- [Web video codec guide](/en-US/docs/Web/Media/Formats/Video_codecs)
-- [Web audio codec guide](/en-US/docs/Web/Media/Formats/Audio_codecs)
-- [Guide to media types and formats on the web](/en-US/docs/Web/Media/Formats)
+- [Web video codec guide](/en-US/docs/Web/Media/Guides/Formats/Video_codecs)
+- [Web audio codec guide](/en-US/docs/Web/Media/Guides/Formats/Audio_codecs)
+- [Guide to media types and formats on the web](/en-US/docs/Web/Media/Guides/Formats)

files/en-us/glossary/webm/index.md

@@ -6,7 +6,7 @@ page-type: glossary-definition
 
 {{GlossarySidebar}}
 
-**[WebM](/en-US/docs/Web/Media/Formats/Containers#webm)** is a royalty-free and open web video format, which is natively supported in all modern browsers.
+**[WebM](/en-US/docs/Web/Media/Guides/Formats/Containers#webm)** is a royalty-free and open web video format, which is natively supported in all modern browsers.
 
 ## See also
 

files/en-us/learn_web_development/core/accessibility/multimedia/index.md

@@ -225,9 +225,9 @@ Each time the time updates (once per second), we fire this function. It works ou
 
 This gives you a basic idea of how to add custom player functionality to video/audio player instances. For more information on how to add more complex features to video/audio players, see:
 
-- [Audio and video delivery](/en-US/docs/Web/Media/Audio_and_video_delivery)
-- [Video player styling basics](/en-US/docs/Web/Media/Audio_and_video_delivery/Video_player_styling_basics)
-- [Creating a cross-browser video player](/en-US/docs/Web/Media/Audio_and_video_delivery/cross_browser_video_player)
+- [Audio and video delivery](/en-US/docs/Web/Media/Guides/Audio_and_video_delivery)
+- [Video player styling basics](/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/Video_player_styling_basics)
+- [Creating a cross-browser video player](/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/cross_browser_video_player)
 
 We've also created an advanced example to show how you could create an object-oriented system that finds every video and audio player on the page (no matter how many there are) and adds our custom controls to it. See [custom-controls-oojs](https://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/) (also [see the source code](https://github.com/mdn/learning-area/tree/main/accessibility/multimedia/custom-controls-OOJS)).
 
@@ -323,7 +323,7 @@ This will result in a video that has subtitles displayed, kind of like this:
 
 ![Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."](video-player-with-captions.png)
 
-For more details, see [Adding captions and subtitles to HTML video](/en-US/docs/Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video). You can find [the example](https://iandevlin.github.io/mdn/video-player-with-captions/) that goes along with this article on GitHub, written by Ian Devlin (see the [source code](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions) too.) This example uses JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option — English, Deutsch, or Español.
+For more details, see [Adding captions and subtitles to HTML video](/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video). You can find [the example](https://iandevlin.github.io/mdn/video-player-with-captions/) that goes along with this article on GitHub, written by Ian Devlin (see the [source code](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions) too.) This example uses JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option — English, Deutsch, or Español.
 
 > [!NOTE]
 > Text tracks and transcriptions also help you with {{glossary("SEO")}}, since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.

files/en-us/learn_web_development/core/scripting/what_is_javascript/index.md

@@ -114,7 +114,7 @@ They generally fall into two categories.
   This is how [Google Maps](https://www.google.com/maps) is able to find your location and plot it on a map.
 - The [Canvas](/en-US/docs/Web/API/Canvas_API) and [WebGL](/en-US/docs/Web/API/WebGL_API) APIs allow you to create animated 2D and 3D graphics.
   People are doing some amazing things using these web technologies — see [Chrome Experiments](https://experiments.withgoogle.com/collection/chrome) and [webglsamples](https://webglsamples.org/).
-- [Audio and Video APIs](/en-US/docs/Web/Media/Audio_and_video_delivery) like {{domxref("HTMLMediaElement")}} and [WebRTC](/en-US/docs/Web/API/WebRTC_API) allow you to do really interesting things with multimedia, such as play audio and video right in a web page, or grab video from your web camera and display it on someone else's computer (try our simple [Snapshot demo](https://chrisdavidmills.github.io/snapshot/) to get the idea).
+- [Audio and Video APIs](/en-US/docs/Web/Media/Guides/Audio_and_video_delivery) like {{domxref("HTMLMediaElement")}} and [WebRTC](/en-US/docs/Web/API/WebRTC_API) allow you to do really interesting things with multimedia, such as play audio and video right in a web page, or grab video from your web camera and display it on someone else's computer (try our simple [Snapshot demo](https://chrisdavidmills.github.io/snapshot/) to get the idea).
 
 **Third party APIs** are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example: