Updates

VideoWebStory.html

@@ -325,7 +325,7 @@ <h5>Parameters:</h5>
         <p class="tag-source">
             <a href="atoms_video-web-story_video-web-story.tsx.html" class="button">View Source</a>
             <span>
-                <a href="atoms_video-web-story_video-web-story.tsx.html">atoms/video-web-story/video-web-story.tsx</a>, <a href="atoms_video-web-story_video-web-story.tsx.html#line28">line 28</a>
+                <a href="atoms_video-web-story_video-web-story.tsx.html">atoms/video-web-story/video-web-story.tsx</a>, <a href="atoms_video-web-story_video-web-story.tsx.html#line45">line 45</a>
             </span>
         </p>
 

atoms_video-web-story_video-web-story.tsx.html

@@ -142,10 +142,27 @@ <h1>atoms/video-web-story/video-web-story.tsx</h1>
 import atob from "atob-utf-8";
 import { withConfig } from "../../context";
 
+const getVideoData = (videoElement) => {
+  const videoElementType = videoElement.type;
+  let videoUrl = "";
+  let format = "";
+  if (videoElementType === "jsembed") {
+    videoUrl = atob(`${videoElement["embed-js"]}`);
+    format = videoUrl.split(".")[3];
+  } else if (videoElementType === "video") {
+    videoUrl = videoElement?.["metadata"]?.["video-clip-url"];
+    const splittedURL = videoUrl?.split("/");
+    const videoName = splittedURL?.[splittedURL.length - 1]?.split(".");
+    format = videoName?.[videoName.length - 1];
+  }
+  return { videoUrl, format };
+};
+
 export const VideoWebStoryBase = ({ config, videoElement, imageElement, heroImage }) => {
-  const videoUrl = videoElement &amp;&amp; atob(`${videoElement["embed-js"]}`);
-  const format = videoUrl.split(".")[3];
-  const poster = imageElement ? `https://${config.publisherConfig["cdn-image"]}/${imageElement["image-s3-key"]}` : `https://${config.publisherConfig["cdn-image"]}/${heroImage["hero-image-s3-key"]}` ;
+  const { videoUrl, format } = getVideoData(videoElement);
+  const poster = imageElement
+    ? `https://${config.publisherConfig["cdn-image"]}/${imageElement["image-s3-key"]}`
+    : `https://${config.publisherConfig["cdn-image"]}/${heroImage?.["hero-image-s3-key"]}`;
   return (
     &lt;Fragment>
       &lt;Helmet>