feat: ✨ Video and ip works !!

src/App.tsx

@@ -1,6 +1,7 @@
-import { useState, useEffect } from 'react'
+import React, { useState, useEffect } from 'react'
 import './App.css'
 import axios from 'axios'
+import ReactPlayer from 'react-player'
 import video from './assets/GarfieldIP.mp4'
 
 function App() {
@@ -18,11 +19,16 @@ function App() {
 
   return (
     <>
-     <div className='App'>
+      <div className='App'>
-      <h2>Your IP Address is </h2>
+        <h2>Your IP Address is </h2>
-      <h4>{ip || "loading"}</h4>
+        <h4>{ip || "loading"}</h4>
-      <video src={video} width="750" height="500" controls autoPlay></video>
+        <div className="video-container">
-     </div>
+          <video src={video} controls height="500" width="800" />
+          <div className="text-overlay">
+            <p>{ip || " "}</p>
+          </div>
+        </div>
+      </div>
     </>
   )
 }

src/index.css

@@ -67,3 +67,46 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+
+.wrapper {
+  position: relative;
+  padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
+  size: 300%;
+}
+
+.player {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  size: 300%;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  font-size: 24px;
+  size: 300%;
+}
+
+.video-container {
+  position: relative;
+  width: 100%;
+}
+
+.text-overlay {
+  position: absolute;
+  top: 53%;
+  left: 60%;
+  transform: translate(-50%, -50%);
+  color: white;
+  padding: 20px;
+  text-align: center;
+}