Update movie.html

movie.html

@@ -124,6 +124,7 @@
             font-weight: bold;
             margin-top: 20px;
             transition: background-color 0.3s;
+            cursor: pointer;
         }
 
         .watch-button:hover {
@@ -148,6 +149,31 @@
             transform: scale(1.05);
         }
 
+        .video-container {
+            margin-top: 50px;
+            padding: 20px;
+            background-color: #000;
+            border-radius: 10px;
+        }
+
+        .video-wrapper {
+            position: relative;
+            padding-bottom: 56.25%; /* 16:9 aspect ratio */
+            height: 0;
+            overflow: hidden;
+            max-width: 100%;
+            border-radius: 8px;
+        }
+
+        .video-wrapper iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+
         @media (max-width: 768px) {
             .movie-details {
                 grid-template-columns: 1fr;
@@ -179,6 +205,11 @@
 
     <div class="container">
         <div id="movieContent"></div>
+        <div class="video-container" id="moviePlayer">
+            <div class="video-wrapper">
+                <iframe id="movieFrame" allowfullscreen></iframe>
+            </div>
+        </div>
     </div>
 
     <script>
@@ -207,7 +238,11 @@
 
         function displayMovieDetails(movie, credits, images) {
             const content = document.getElementById('movieContent');
+            const movieFrame = document.getElementById('movieFrame');
             
+            // Set up the video player
+            movieFrame.src = `https://vidsrc.in/embed/movie/${movie.id}`;
+
             const revenue = new Intl.NumberFormat('en-US', {
                 style: 'currency',
                 currency: 'USD'
@@ -224,9 +259,7 @@
                         <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" 
                              alt="${movie.title}"
                              onerror="this.src='https://via.placeholder.com/500x750?text=No+Poster'">
-                        <a href="https://vidsrc.in/embed/movie/${movie.id}" 
-                           target="_blank" 
-                           class="watch-button">Watch Movie</a>
+                        <a href="#moviePlayer" class="watch-button">Watch Movie</a>
                     </div>
                     <div class="info">
                         <h2>${movie.title}</h2>