diff --git a/client/src/components/video-modal.tsx b/client/src/components/video-modal.tsx
index 433e3a6..2d63e31 100644
--- a/client/src/components/video-modal.tsx
+++ b/client/src/components/video-modal.tsx
@@ -140,11 +140,19 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
 
         player.ready(() => {
           console.log('Video.js player ready with source');
-          
-          // Capture video thumbnail when ready
+        });
+
+        // Listen for loadeddata event to capture thumbnail
+        player.on('loadeddata', () => {
+          console.log('Video data loaded, capturing thumbnail');
           setTimeout(() => {
             captureVideoThumbnail(player);
-          }, 2000); // Wait 2 seconds for video to load
+          }, 500);
+        });
+
+        player.on('canplay', () => {
+          console.log('Video can play, attempting thumbnail capture');
+          captureVideoThumbnail(player);
         });
 
         player.on('error', (error: any) => {
@@ -192,16 +200,22 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
     try {
       const canvas = document.createElement('canvas');
       const ctx = canvas.getContext('2d');
-      const videoElement = player.tech().el();
       
-      if (videoElement && ctx) {
-        canvas.width = videoElement.videoWidth || 640;
-        canvas.height = videoElement.videoHeight || 360;
+      // Get video element directly from player
+      const videoElement = player.el().querySelector('video');
+      
+      if (videoElement && ctx && videoElement.videoWidth > 0) {
+        canvas.width = videoElement.videoWidth;
+        canvas.height = videoElement.videoHeight;
         
         ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
         const thumbnailUrl = canvas.toDataURL('image/jpeg', 0.8);
         setVideoThumbnail(thumbnailUrl);
-        console.log('Video thumbnail captured');
+        console.log('Video thumbnail captured successfully', canvas.width, 'x', canvas.height);
+      } else {
+        console.log('Video element not ready for thumbnail capture');
+        // Retry after a delay
+        setTimeout(() => captureVideoThumbnail(player), 1000);
       }
     } catch (error) {
       console.log('Failed to capture video thumbnail:', error);
@@ -318,38 +332,38 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
                       )}
                     </div>
                     
-                    <FacebookShareButton
-                      url={getShareUrl()}
-                      hashtag="#video"
-                      onClick={() => console.log('Facebook share clicked:', getShareUrl())}
+                    <div
+                      onClick={() => {
+                        console.log('Facebook share clicked:', getShareUrl());
+                        window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(getShareUrl())}`, '_blank', 'width=600,height=400');
+                      }}
+                      className="flex items-center gap-2 p-2 w-full hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer"
                     >
-                      <div className="flex items-center gap-2 p-2 w-full hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer">
-                        <FacebookIcon size={20} round />
-                        <span className="text-sm text-gray-900 dark:text-gray-100">Facebook</span>
-                      </div>
-                    </FacebookShareButton>
+                      <FacebookIcon size={20} round />
+                      <span className="text-sm text-gray-900 dark:text-gray-100">Facebook</span>
+                    </div>
                     
-                    <TwitterShareButton
-                      url={getShareUrl()}
-                      title={`Watch: ${video.title}`}
-                      onClick={() => console.log('Twitter share clicked:', getShareUrl())}
+                    <div
+                      onClick={() => {
+                        console.log('Twitter share clicked:', getShareUrl());
+                        window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(getShareUrl())}&text=${encodeURIComponent(`Watch: ${video.title}`)}`, '_blank', 'width=600,height=400');
+                      }}
+                      className="flex items-center gap-2 p-2 w-full hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer"
                     >
-                      <div className="flex items-center gap-2 p-2 w-full hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer">
-                        <TwitterIcon size={20} round />
-                        <span className="text-sm text-gray-900 dark:text-gray-100">Twitter</span>
-                      </div>
-                    </TwitterShareButton>
+                      <TwitterIcon size={20} round />
+                      <span className="text-sm text-gray-900 dark:text-gray-100">Twitter</span>
+                    </div>
                     
-                    <WhatsappShareButton
-                      url={getShareUrl()}
-                      title={`Watch: ${video.title}`}
-                      onClick={() => console.log('WhatsApp share clicked:', getShareUrl())}
+                    <div
+                      onClick={() => {
+                        console.log('WhatsApp share clicked:', getShareUrl());
+                        window.open(`https://wa.me/?text=${encodeURIComponent(`Watch: ${video.title} ${getShareUrl()}`)}`, '_blank');
+                      }}
+                      className="flex items-center gap-2 p-2 w-full hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer"
                     >
-                      <div className="flex items-center gap-2 p-2 w-full hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer">
-                        <WhatsappIcon size={20} round />
-                        <span className="text-sm text-gray-900 dark:text-gray-100">WhatsApp</span>
-                      </div>
-                    </WhatsappShareButton>
+                      <WhatsappIcon size={20} round />
+                      <span className="text-sm text-gray-900 dark:text-gray-100">WhatsApp</span>
+                    </div>
                     
                     <button
                       onClick={copyToClipboard}
diff --git a/replit.md b/replit.md
index c344d0b..9948a3e 100644
--- a/replit.md
+++ b/replit.md
@@ -13,7 +13,7 @@ VideoStream is a fully functional video streaming platform that integrates direc
 - ✅ **Bunny.net Integration**: Complete integration with private video library using signed URLs for secure access
 - ✅ **Error Handling**: Robust error handling with Video.js fallback mechanisms
 - ✅ **Performance**: Optimized video loading with adaptive bitrate streaming and proper buffering
-- ✅ **Social Media Sharing**: Implemented social sharing for Facebook, Twitter, WhatsApp with custom share menu and automatic video thumbnail capture
+- ✅ **Social Media Sharing**: Implemented direct social sharing for Facebook, Twitter, WhatsApp with custom popup windows and automatic video thumbnail capture
 - ✅ **Monetization Ready**: Professional advertising framework ready for revenue generation
 - ✅ **Copy Link Feature**: Easy link copying with visual feedback notifications