center and border radius

src/Pages/Dashboard/index.js

@@ -1,4 +1,4 @@
-import { Card, Spin } from "antd";
+import { Card, Flex, Spin } from "antd";
 import { useState } from "react";
 import MyCenteredContainer from "../../Components/MyContainer";
 import { useTranslation } from "react-i18next";
@@ -11,22 +11,25 @@ export default function Dashboard() {
   return (
     <Card title={t("dashboard.pageTitle")}>
       {isLoading && (
-        <MyCenteredContainer fullHeight height={616}>
+        <MyCenteredContainer fullHeight height={800}>
           <Spin size="large" />
         </MyCenteredContainer>
       )}
 
-      <iframe
-        src={process.env.REACT_APP_DASHBOARD_INTRODUCTION_VIDEO}
-        onLoad={() => setIsLoading(false)}
-        width={1096}
-        height={616}
-        style={{
-          border: "none",
-          zIndex: 2,
-          display: isLoading ? "none" : "block",
-        }}
-      />
+      <Flex justify="center">
+        <iframe
+          src={process.env.REACT_APP_DASHBOARD_INTRODUCTION_VIDEO}
+          onLoad={() => setIsLoading(false)}
+          width="100%"
+          height={800}
+          style={{
+            border: "none",
+            zIndex: 2,
+            display: isLoading ? "none" : "block",
+            borderRadius: 12,
+          }}
+        />
+      </Flex>
     </Card>
   );
 }