Pedram Made The Video Player A Component And Fixed Video Display Page

src/components/VideoPlayer/index.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+import './index.css';
+
+const VideoPlayer = ({
+    playerWidth,
+
+}) => {
+    return(
+            <video style={{ width: playerWidth,  }} controls>
+            <source
+              src={`https://dnvn.ir/api/v1/file/20540`}
+              type="video/mp4"
+            />
+          </video>
+    );
+};
+
+export default VideoPlayer;

src/views/VideoDisplay/Desktop/index.js

@@ -1,16 +1,21 @@
 import React from "react";
 import CourseChapter from "../../../components/CourseChapter";
+import VideoPlayer from "../../../components/VideoPlayer";
 const DesktopVideoDisplay = () =>{
     return(
         <div className="w-full flex flex-col px-4 items-center">
-      <div className="w-11/12 flex flex-col mb-6 items-center">
+      <div className="w-4/5 flex flex-col mb-6 justify-center items-center">
-        <div className="w-full flex flex-row flex-1 justify-between items-center overflow-hidden relative">
+        <div className="w-full flex flex-row flex-1 justify-center overflow-hidden relative">
-          <video style={{ width: "70%",  }} controls>
+          <div className="flex flex-col w-4/5">
-            <source
+
-              src={`https://dnvn.ir/api/v1/file/20540`}
+            
-              type="video/mp4"
+            <VideoPlayer playerWidth='100%' />
-            />
+            
-          </video>
+            <h1 className="mx-4 my-2 text-4xl text-blue52 py-6 border-b-2 border-solid border-gray-300">ساز های باستانی ایران عزیز</h1>
+            <p className="m-4 text-gray-600">
+            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+            </p>
+        </div>
           <CourseChapter />
         </div>
         {/* <div className="flex flex-col flex-1 justify-between pr-2">
@@ -22,6 +27,9 @@ const DesktopVideoDisplay = () =>{
           </div>
           <Divider type={"vertical"} />
         </div> */}
+        <div>
+            
+        </div>
       </div>
       </div>
     );