pagenot responsive when clicks fix it

add all movies strems on clicks
remove tag stream quality from main page
instert it html5 video player on the page for movies

components/movie-row.js

@@ -48,12 +48,13 @@ class MovieRow extends HTMLElement {
           min-width: 200px;
           transition: transform 0.3s;
           position: relative;
+          cursor: pointer;
         }
         .movie-card:hover {
           transform: scale(1.05);
           z-index: 10;
         }
-        .movie-poster {
+.movie-poster {
           width: 100%;
           border-radius: 4px;
           cursor: pointer;
@@ -102,11 +103,12 @@ class MovieRow extends HTMLElement {
       card.innerHTML = `
         <img 
           class="movie-poster" 
-          src="${movie.poster_path ? `https://image.tmdb.org/t/p/w200${movie.poster_path}` : 'http://static.photos/movie/200x200'}" 
+          src="${movie.poster_path ? `https://image.tmdb.org/t/p/w200${movie.poster_path}` : 'http://static.photos/movie/200x200'}"
           alt="${movie.title}"
           loading="lazy"
+          data-movie-id="${movie.id}"
         >
-      `;
+`;
       container.appendChild(card);
     });
   }

script.js

@@ -1,40 +1,79 @@
+
 document.addEventListener('DOMContentLoaded', () => {
-  // Initialize stream quality selector
-  initStreamQuality();
-  
   // Add upcoming movies highlight animation
   highlightUpcomingMovies();
   
   // Handle search functionality
   setupSearch();
+  
+  // Handle movie card clicks
+  setupMoviePlayback();
 });
+function setupMoviePlayback() {
+  document.addEventListener('click', async (e) => {
+    const movieCard = e.target.closest('.movie-poster');
+    if (movieCard) {
+      const movieId = movieCard.dataset.movieId;
+      if (movieId) {
+        try {
+          // Fetch movie details
+          const response = await fetch(`https://api.themoviedb.org/3/movie/${movieId}?api_key=8f2b224acadeeebc64ef32b4c04919de&append_to_response=videos`);
+          const movieData = await response.json();
+          
+          // Create video player
+          createVideoPlayer(movieData);
+        } catch (error) {
+          console.error('Error fetching movie details:', error);
+        }
+      }
+    }
+    
+    // Close player when clicking outside
+    const player = document.querySelector('.video-player');
+    if (player && !e.target.closest('.video-player') && !e.target.closest('.movie-poster')) {
+      player.remove();
+    }
+  });
+}
+
+function createVideoPlayer(movieData) {
+  // Remove existing player if any
+  const existingPlayer = document.querySelector('.video-player');
+  if (existingPlayer) existingPlayer.remove();
 
-function initStreamQuality() {
-  const qualityContainer = document.createElement('div');
-  qualityContainer.className = 'stream-quality';
-  qualityContainer.innerHTML = `
-    <h3>Stream Quality</h3>
-    <div class="server-options">
-      <button class="server-btn active" data-quality="auto">Auto</button>
-      <button class="server-btn" data-quality="1080p">1080p</button>
-      <button class="server-btn" data-quality="720p">720p</button>
-      <button class="server-btn" data-quality="480p">480p</button>
+  // Find trailer video
+  const trailer = movieData.videos?.results?.find(v => v.type === 'Trailer');
+  const videoUrl = trailer 
+    ? `https://www.youtube.com/embed/${trailer.key}?autoplay=1` 
+    : '';
+
+  const player = document.createElement('div');
+  player.className = 'video-player';
+  player.innerHTML = `
+    <div class="player-overlay"></div>
+    <div class="player-content">
+      <button class="close-player">×</button>
+      <h3>${movieData.title}</h3>
+      <p>${movieData.overview}</p>
+      ${videoUrl ? `
+        <iframe 
+          width="100%" 
+          height="500" 
+          src="${videoUrl}" 
+          frameborder="0" 
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+          allowfullscreen>
+        </iframe>
+      ` : '<p>No trailer available for this movie</p>'}
     </div>
   `;
-  document.body.appendChild(qualityContainer);
+  document.body.appendChild(player);
 
-  // Handle quality selection
-  const qualityBtns = document.querySelectorAll('.server-btn');
-  qualityBtns.forEach(btn => {
-    btn.addEventListener('click', () => {
-      qualityBtns.forEach(b => b.classList.remove('active'));
-      btn.classList.add('active');
-      // Here you would typically update the stream quality
-      console.log(`Switched to ${btn.dataset.quality} quality`);
-    });
+  // Close button event
+  player.querySelector('.close-player').addEventListener('click', () => {
+    player.remove();
   });
 }
-
 function highlightUpcomingMovies() {
   // Find all upcoming movie cards and add pulse animation
   setTimeout(() => {