Update

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

@@ -87,8 +87,8 @@ const VideoEditor = ({ width, height }) => {
                 layer: 1,
                 inPoint: 0,
                 duration: memeDuration,
-                x: 50, // Offset slightly for overlay effect
-                y: 50,
+                x: 0, // Offset slightly for overlay effect
+                y: 0,
                 width: dimensions.width - 100,
                 height: dimensions.height - 100,
             });
@@ -194,6 +194,13 @@ const VideoEditor = ({ width, height }) => {
             posterImg.crossOrigin = 'anonymous';
             posterImg.src = element.poster;
 
+            // Fixed section from setupVideos function in video-editor.jsx
+            // Replace this entire posterImg.onload section in your setupVideos function
+
+            // Replace this entire posterImg.onload section in your setupVideos function
+
+            // Replace this entire posterImg.onload section in your setupVideos function
+
             posterImg.onload = () => {
                 console.log('Poster loaded for:', element.id);
 
@@ -202,30 +209,49 @@ const VideoEditor = ({ width, height }) => {
                 const posterWidth = posterImg.naturalWidth;
                 const posterHeight = posterImg.naturalHeight;
 
-                let scaledWidth = posterWidth;
-                let scaledHeight = posterHeight;
+                // ✅ UPDATED: Check if this element is the selectedBackground using store data
+                const isBackgroundElement = selectedBackground && element.id.includes(selectedBackground.ids);
 
-                if (posterWidth > maxWidth || posterHeight > maxHeight) {
+                let scaledWidth, scaledHeight, centeredX, centeredY;
+
+                if (isBackgroundElement) {
+                    // Background should maintain aspect ratio and cover the entire canvas
+                    // Calculate scale to cover entire canvas (like CSS object-fit: cover)
                     const scaleX = maxWidth / posterWidth;
                     const scaleY = maxHeight / posterHeight;
-                    const scale = Math.min(scaleX, scaleY);
+                    const scale = Math.max(scaleX, scaleY); // Use larger scale to cover
 
                     scaledWidth = posterWidth * scale;
                     scaledHeight = posterHeight * scale;
-                }
 
-                // ✅ UPDATED: Different positioning for background vs meme
-                let centeredX, centeredY;
-                if (element.id.startsWith('bg_')) {
-                    // Background should fill the canvas
-                    centeredX = 0;
-                    centeredY = 0;
-                    scaledWidth = maxWidth;
-                    scaledHeight = maxHeight;
-                } else {
-                    // Meme should be centered
+                    // Center the background
                     centeredX = (maxWidth - scaledWidth) / 2;
                     centeredY = (maxHeight - scaledHeight) / 2;
+                } else {
+                    // Meme overlay: start with original size, apply constraints, then 70% and bottom positioning
+                    scaledWidth = posterWidth;
+                    scaledHeight = posterHeight;
+
+                    // Apply size constraints (keep original logic for memes)
+                    if (posterWidth > maxWidth || posterHeight > maxHeight) {
+                        const scaleX = maxWidth / posterWidth;
+                        const scaleY = maxHeight / posterHeight;
+                        const scale = Math.min(scaleX, scaleY);
+
+                        scaledWidth = posterWidth * scale;
+                        scaledHeight = posterHeight * scale;
+                    }
+
+                    // Apply 70% size reduction
+                    scaledWidth = scaledWidth * 0.7;
+                    scaledHeight = scaledHeight * 0.7;
+
+                    // Center horizontally
+                    centeredX = (maxWidth - scaledWidth) / 2;
+
+                    // Position at bottom with some padding
+                    const bottomPadding = 40; // 40px from bottom
+                    centeredY = maxHeight - scaledHeight - bottomPadding;
                 }
 
                 setTimelineElements((prev) =>