Update

resources/js/modules/editor/partials/canvas/video-preview.jsx

@@ -38,16 +38,40 @@ const VideoPreview = ({
     // Refs
     layerRef,
 }) => {
+    // Function to determine which image source to use for videos
+    const getImageSource = (element) => {
+        // Check if this video should be playing right now
+        const isVideoActive = videoStates[element.id] && isPlaying;
+
+        // Use video if it's ready and currently active, otherwise use poster
+        if (isVideoActive && element.videoElement && element.isVideoReady) {
+            return element.videoElement;
+        } else if (element.posterImage && element.isVideoPoster) {
+            return element.posterImage;
+        }
+
+        // Fallback - no image ready yet
+        return null;
+    };
+
     return (
         <div>
+            <div>isPlaying: {isPlaying ? 'true' : 'false'}</div>
+
             <Stage width={dimensions.width} height={dimensions.height} className="">
                 <Layer ref={layerRef}>
                     {activeElements.map((element) => {
-                        if (element.type === 'video' && videoElements[element.id]) {
+                        if (element.type === 'video') {
+                            const imageSource = getImageSource(element);
+
+                            if (!imageSource) {
+                                return null; // Don't render if no source is ready
+                            }
+
                             return (
                                 <Image
                                     key={element.id}
-                                    image={videoElements[element.id]}
+                                    image={imageSource}
                                     x={element.x}
                                     y={element.y}
                                     width={element.width}