[docs] Fix caption not shown on Video (#27943)

# Why

<!--
Please describe the motivation for this PR, and link to relevant GitHub
issues, forums posts, or feature requests.
-->

We recently updated Video component to add a border radius as per our
styleguide. We also introduced adding a caption at the bottom of a video
in #26064. Since the latter PR was
created before the former, setting `overflow: hidden` also hides the
`caption`.

This PR takes `<p>` that is used to display the caption outside of the
`<div>` on which `overflow` is used. It also creates wrapper `<div>` to
preserve the initial `margin-bottom`.

# Test Plan

<!--
Please describe how you tested this change and how a reviewer could
reproduce your test, especially if this PR does not include automated
tests! If possible, please also provide terminal output and/or
screenshots demonstrating your test/reproduction.
-->

Run docs locally and see http://localhost:3002/review/with-orbit/ (this
is the page where we use `caption`).

## Preview

![CleanShot 2024-03-29 at 21 09
06@2x](https://github.com/expo/expo/assets/10234615/356795b6-4768-4076-9346-60c07e66ba9f)


# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [ ] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [ ] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).

docs/components/plugins/Video.tsx

@@ -36,39 +36,40 @@ const Video = ({ controls, spaceAfter, url, file, loop = true, caption }: VideoP
       onMouseLeave={() => setHover(false)}>
       <VisibilitySensor partialVisibility>
         {({ isVisible }: { isVisible: boolean }) => (
-          <div css={[videoWrapperStyle, { marginBottom: getInitialMarginBottom(spaceAfter) }]}>
-            <ReactPlayer
-              url={isVisible ? url || `/static/videos/${file}` : undefined}
-              className="react-player"
-              width={PLAYER_WIDTH}
-              height={PLAYER_HEIGHT}
-              style={{
-                outline: 'none',
-                backgroundColor: '#000',
-                borderRadius: borderRadius.md,
-              }}
-              muted
-              playing={isVisible && !!file}
-              controls={typeof controls === 'undefined' ? forceShowControls : controls}
-              playsinline
-              loop={loop}
-            />
-            <div
-              css={[
-                videoWrapperStyle,
-                dimmerStyle,
-                {
-                  opacity: isVisible ? 0 : 0.7,
-                },
-              ]}
-            />
+          <div css={{ marginBottom: getInitialMarginBottom(spaceAfter) }}>
+            <div css={videoWrapperStyle}>
+              <ReactPlayer
+                url={isVisible ? url || `/static/videos/${file}` : undefined}
+                className="react-player"
+                width={PLAYER_WIDTH}
+                height={PLAYER_HEIGHT}
+                style={{
+                  outline: 'none',
+                  backgroundColor: '#000',
+                  borderRadius: borderRadius.md,
+                }}
+                muted
+                playing={isVisible && !!file}
+                controls={typeof controls === 'undefined' ? forceShowControls : controls}
+                playsinline
+                loop={loop}
+              />
+              <div
+                css={[
+                  videoWrapperStyle,
+                  dimmerStyle,
+                  {
+                    opacity: isVisible ? 0 : 0.7,
+                  },
+                ]}
+              />
+            </div>
             <p
               style={{
                 marginTop: 14,
                 fontSize: 14,
                 color: theme.text.secondary,
                 textAlign: 'center',
-                marginBottom: 30,
                 lineHeight: 1.15,
               }}>
               {caption}

docs/pages/review/with-orbit.mdx

@@ -28,7 +28,7 @@ If you don't have any development builds available, either because they have all
 
 <Video
   url="https://www.youtube.com/watch?v=l-Lx7BglNUE"
-  spaceAfter={50}
+  spaceAfter={20}
   caption="Expo Orbit launching an update directly from Expo dashboard to an Android Emulator."
 />