Louisa/media component (#1557)

* Fixing media component * updates * update package.json * update media component's width * update * revert package
adobe · Jan 23, 2024 · f376a65 · f376a65
1 parent 02bf383
commit f376a65
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/example/src/pages/index.md b/example/src/pages/index.md
@@ -344,5 +344,14 @@ Inline Alert as a nested component
 
       </InlineNestedAlert>
 
+<Media slots="video"/>
 
+<https://images-tv.adobe.com/mpcv3/5158/d58772af-7a62-49fa-a098-12b11a27fb71_1615917048.854x480at800_h264.mp4#t=3>
 
+<Media slots="video" width="800px" height="600px"/>
+
+<https://video.tv.adobe.com/v/26260/>
+
+<Media slots="video"/>
+
+<https://www.youtube.com/watch?v=mkgpeWbHrjA>
diff --git a/packages/gatsby-theme-aio/src/components/Media/index.js b/packages/gatsby-theme-aio/src/components/Media/index.js
@@ -33,7 +33,7 @@ const Media = ({ video, ...props }) => {
   const link = getElementChild(video);
   const videos = ["mp4", "3gp", "ogg"];
   const url = new URL(link.props.href);
-  const extension = url.pathname.split(".")[1];
+  const extension = url.pathname.split(".")?.at(-1);
   const youTubeId = getYouTubeId(new URL(link.props.href));
   if (youTubeId) {
     return (
@@ -53,6 +53,7 @@ const Media = ({ video, ...props }) => {
       src={link.props.href}
       css={css`
         display: block;
+        width: 100%;
         margin: var(--spectrum-global-dimension-size-400) auto;
       `}
       {...props}