(docs) Clarify video embed syntax (#1138)

Author: devalog

fern/products/docs/pages/component-library/writing-content/markdown.mdx

@@ -110,22 +110,40 @@ For example, to embed a video, use the following Markdown:
 
 ### Local videos
 
-
 You can embed videos in your documentation using the HTML `<video>` tag. This gives you control over video playback settings like autoplay, looping, and muting.
 
+<Markdown src="/snippets/html-video-syntax-callout.mdx" />
+
+<Tabs>
+<Tab title="Rendered video">
+<video 
+    src="./embed-fern-waving.mp4"
+    width="854"
+    height="480"
+    autoPlay
+    loop
+    muted
+    controls
+>
+</video>
+</Tab>
+<Tab title="HTML">
 ```html
 <video 
     src="path/to/your/video.mp4"
     width="854"
     height="480"
-    autoplay
+    autoPlay
     loop
-    playsinline
+    playsInline
     muted
 >
 </video>
 ```
 
+</Tab>
+</Tabs>
+
 You can also wrap the video in a container div for additional styling:
 
 ```html
@@ -134,9 +152,9 @@ You can also wrap the video in a container div for additional styling:
         src="path/to/your/video.mp4"
         width="854"
         height="480"
-        autoplay
+        autoPlay
         loop
-        playsinline
+        playsInline
         muted
     >
     </video>
@@ -149,9 +167,9 @@ Common video attributes:
 | --------- | ----------- |
 | `src` | URL or path to the video file |
 | `width` and `height` | Dimensions of the video player |
-| `autoplay` | Video starts playing automatically |
+| `autoPlay` | Video starts playing automatically |
 | `loop` | Video repeats when finished |
-| `playsinline` | Video plays inline on mobile devices instead of fullscreen |
+| `playsInline` | Video plays inline on mobile devices instead of fullscreen |
 | `muted` | Video plays without sound |
 | `controls` | Shows video player controls (play/pause, volume, etc.) |
 
@@ -163,27 +181,26 @@ For more details about the HTML video element and its attributes, see the [MDN d
 
 You can embed videos from YouTube, Loom, Vimeo, and other streaming platforms using an `<iframe>` element.
 
+<Markdown src="/snippets/html-video-syntax-callout.mdx" />
+
 <Tabs>
-  <Tab title="YouTube">
-    ```mdx
-    <iframe
-      width="100%"
-      height="450px"
-      src="https://www.youtube.com/embed/jqBPmGWwt8c?si=3SNDLqnTDqOD-c1P"
-      frameborder="0"
-      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-      referrerpolicy="strict-origin-when-cross-origin"
-      allowfullscreen
-    ></iframe>
-    ```
+  <Tab title="Rendered Loom video">
+  <iframe
+    src="https://www.loom.com/embed/2e7f038de6894c69bf9c0d2525b0ad7f?sid=8bb327d2-8ba6-413c-a832-8d80282ad527"
+    width="100%"
+    height="450px"
+    frameBorder="0"
+    allowFullScreen
+  ></iframe>
   </Tab>
-  <Tab title="Loom">
+  <Tab title="Loom video syntax">
     ```mdx
     <iframe
       src="https://www.loom.com/embed/2e7f038de6894c69bf9c0d2525b0ad7f?sid=8bb327d2-8ba6-413c-a832-8d80282ad527"
       width="100%"
       height="450px"
-      frameborder="0"
+      frameBorder="0"
+      allowFullScreen
     ></iframe>
     ```
   </Tab>

fern/snippets/html-video-syntax-callout.mdx

@@ -0,0 +1,3 @@
+<Warning>
+  `.mdx` files use JSX syntax, not pure HTML. Attributes for HTML elements like `<video>` and `<iframe>` that are embedded in `.mdx` pages must be written in `camelCase` rather than lowercase. For example, use `autoPlay` instead of `autoplay`.
+</Warning>