Change Video Player to Plyr Player

kaamil-ahamadh · Nov 19, 2022 · c23d172 · c23d172
1 parent 1774f1c
commit c23d172
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/src/App.css b/src/App.css
@@ -211,4 +211,20 @@ input {
     left: 16px;
     bottom: 25px;
   }
+
+  .related-videos {
+    margin-top: 5vh;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .related-videos {
+    margin-top: 25vh;
+  }
+}
+
+@media screen and (min-width: 1400px) {
+  .related-videos {
+    margin-top: 35vh;
+  }
 }
diff --git a/src/components/VideoPlayCard.js b/src/components/VideoPlayCard.js
@@ -1,18 +1,30 @@
 import React from "react";
+import Plyr from "plyr-react";
+import "plyr-react/plyr.css";
 
 const VideoPlayCard = ({ id, title, description, channelName }) => {
   return (
     <div className="card-play-video">
       <div className="play-video-container">
         <div>
-          <iframe
+          {/* <iframe
             width="100%"
-            // height="280px"
             src={`https://www.youtube.com/embed/${id}`}
             title="YouTube Video Player"
             frameBorder="0"
             className="iframe"
-          ></iframe>
+          ></iframe> */}
+          <Plyr
+            source={{
+              type: "video",
+              sources: [
+                {
+                  src: id,
+                  provider: "youtube",
+                },
+              ],
+            }}
+          />
         </div>
       </div>
       <div className="play-video-details">

diff --git a/src/screens/VideoDetailsScreen.js b/src/screens/VideoDetailsScreen.js
@@ -28,14 +28,14 @@ const VideoDetailsScreen = () => {
   return (
     <>
       {video?.length > 0 && relatedVideos?.length > 0 ? (
-        <>
+        <div className="video-player-container">
           <VideoPlayCard
             id={id}
             title={video[0].snippet.title}
             description={video[0].snippet.description}
             channelName={video[0].snippet.channelTitle}
           />
-          <div>
+          <div className="related-videos">
             <br />
             <br />
             <br />
@@ -45,7 +45,7 @@ const VideoDetailsScreen = () => {
               return <VideoCardResults data={video} key={index} />;
             })}
           </div>
-        </>
+        </div>
       ) : (
         <div>Video Loading...</div>
       )}