diff --git a/src/components/videoEdit/VideoCropOverlay.test.ts b/src/components/videoEdit/VideoCropOverlay.test.ts
index 3c357e37c80..617a54b5d4a 100644
--- a/src/components/videoEdit/VideoCropOverlay.test.ts
+++ b/src/components/videoEdit/VideoCropOverlay.test.ts
@@ -77,6 +77,53 @@ describe('VideoCropOverlay', () => {
     }
   })
 
+  it('spans edge handles along the crop box edges', () => {
+    renderOverlay({ bounds: { x: 100, y: 200, width: 500, height: 250 } })
+
+    const north = screen.getByTestId('crop-handle-n')
+    expect(north.style.left).toBe('10%')
+    expect(north.style.top).toBe('20%')
+    expect(north.style.width).toBe('50%')
+
+    const east = screen.getByTestId('crop-handle-e')
+    expect(east.style.left).toBe('60%')
+    expect(east.style.top).toBe('20%')
+    expect(east.style.height).toBe('25%')
+  })
+
+  it('hides edge handles while the ratio is locked', () => {
+    renderOverlay({ lockedRatio: 1 })
+
+    for (const dir of ['n', 's', 'e', 'w']) {
+      expect(screen.queryByTestId(`crop-handle-${dir}`)).toBeNull()
+    }
+    for (const dir of ['ne', 'nw', 'se', 'sw']) {
+      expect(screen.getByTestId(`crop-handle-${dir}`)).toBeTruthy()
+    }
+  })
+
+  it('resizes the crop box from an edge handle', async () => {
+    const { model } = renderOverlay()
+
+    const handle = screen.getByTestId('crop-handle-e')
+    handle.setPointerCapture = vi.fn()
+
+    await fireEvent.pointerDown(handle, {
+      clientX: 0,
+      clientY: 0,
+      button: 0,
+      pointerId: 1
+    })
+    await fireEvent.pointerMove(handle, {
+      clientX: 10,
+      clientY: 5,
+      pointerId: 1
+    })
+    await fireEvent.pointerUp(handle, { pointerId: 1 })
+
+    expect(model.value).toEqual({ x: 100, y: 100, width: 300, height: 200 })
+  })
+
   it('moves the crop box by dragging it', async () => {
     const { model } = renderOverlay()
 
diff --git a/src/components/videoEdit/VideoCropOverlay.vue b/src/components/videoEdit/VideoCropOverlay.vue
index 24edd104841..32efaf1c303 100644
--- a/src/components/videoEdit/VideoCropOverlay.vue
+++ b/src/components/videoEdit/VideoCropOverlay.vue
@@ -1,13 +1,13 @@
 <template>
   <div
     ref="rootEl"
-    class="pointer-events-none absolute inset-0 overflow-hidden"
+    class="pointer-events-none absolute inset-0"
     data-testid="video-crop-overlay"
   >
     <div
       :class="
         cn(
-          'pointer-events-auto absolute cursor-move border-2 border-white shadow-[0_0_0_9999px_rgba(0,0,0,0.5)]',
+          'pointer-events-auto absolute -m-0.5 box-content cursor-move border-2 border-white shadow-[0_0_0_9999px_rgba(0,0,0,0.5)]',
           disabled && 'pointer-events-none opacity-60'
         )
       "
@@ -17,11 +17,26 @@
       @pointerdown.stop="startDrag('move', $event)"
     />
     <div
-      v-for="handle in HANDLES"
+      v-for="handle in edgeHandles"
       :key="handle.dir"
       :class="
         cn(
-          'pointer-events-auto absolute size-2.5 -translate-1/2 border border-black/40 bg-white',
+          'pointer-events-auto absolute',
+          handle.strip,
+          handle.cursor,
+          disabled && 'pointer-events-none'
+        )
+      "
+      :style="edgeStyle(handle.dir)"
+      :data-testid="`crop-handle-${handle.dir}`"
+      @pointerdown.stop="startDrag(handle.dir, $event)"
+    />
+    <div
+      v-for="handle in CORNER_HANDLES"
+      :key="handle.dir"
+      :class="
+        cn(
+          'pointer-events-auto absolute size-2.5 -translate-1/2 rounded-sm bg-white/80',
           handle.cursor,
           disabled && 'pointer-events-none opacity-60'
         )
@@ -41,15 +56,22 @@ import type { CropResizeDir } from '@/composables/video/useCropBoxEditor'
 import type { Bounds } from '@/renderer/core/layout/types'
 import { cn } from '@comfyorg/tailwind-utils'
 
-const HANDLES: Array<{ dir: CropResizeDir; cursor: string }> = [
+const CORNER_HANDLES: Array<{ dir: CropResizeDir; cursor: string }> = [
   { dir: 'nw', cursor: 'cursor-nwse-resize' },
-  { dir: 'n', cursor: 'cursor-ns-resize' },
   { dir: 'ne', cursor: 'cursor-nesw-resize' },
-  { dir: 'e', cursor: 'cursor-ew-resize' },
   { dir: 'se', cursor: 'cursor-nwse-resize' },
-  { dir: 's', cursor: 'cursor-ns-resize' },
-  { dir: 'sw', cursor: 'cursor-nesw-resize' },
-  { dir: 'w', cursor: 'cursor-ew-resize' }
+  { dir: 'sw', cursor: 'cursor-nesw-resize' }
+]
+
+const EDGE_HANDLES: Array<{
+  dir: CropResizeDir
+  cursor: string
+  strip: string
+}> = [
+  { dir: 'n', cursor: 'cursor-ns-resize', strip: 'h-2 -translate-y-1/2' },
+  { dir: 'e', cursor: 'cursor-ew-resize', strip: 'w-2 -translate-x-1/2' },
+  { dir: 's', cursor: 'cursor-ns-resize', strip: 'h-2 -translate-y-1/2' },
+  { dir: 'w', cursor: 'cursor-ew-resize', strip: 'w-2 -translate-x-1/2' }
 ]
 
 const {
@@ -101,4 +123,22 @@ function handleStyle(dir: CropResizeDir) {
       : y + height / 2
   return { left: pct(cx, sourceWidth), top: pct(cy, sourceHeight) }
 }
+
+const edgeHandles = computed(() => (lockedRatio != null ? [] : EDGE_HANDLES))
+
+function edgeStyle(dir: CropResizeDir) {
+  const { x, y, width, height } = bounds.value
+  if (dir === 'n' || dir === 's') {
+    return {
+      left: pct(x, sourceWidth),
+      top: pct(dir === 'n' ? y : y + height, sourceHeight),
+      width: pct(width, sourceWidth)
+    }
+  }
+  return {
+    left: pct(dir === 'w' ? x : x + width, sourceWidth),
+    top: pct(y, sourceHeight),
+    height: pct(height, sourceHeight)
+  }
+}
 </script>
diff --git a/src/components/videoEdit/VideoEditPanel.vue b/src/components/videoEdit/VideoEditPanel.vue
index c3ec77953ad..95299ef0a22 100644
--- a/src/components/videoEdit/VideoEditPanel.vue
+++ b/src/components/videoEdit/VideoEditPanel.vue
@@ -13,19 +13,21 @@
     <div
       v-else
       data-testid="video-preview-container"
-      class="relative w-full"
-      :style="videoAspectRatioStyle"
+      :class="
+        cn(
+          'overflow-hidden rounded-lg bg-node-component-surface',
+          hasCrop && 'p-1.5'
+        )
+      "
     >
-      <div
-        class="relative size-full overflow-hidden rounded-lg bg-node-component-surface"
-      >
+      <div class="relative w-full" :style="videoAspectRatioStyle">
         <video
           ref="videoRef"
           data-testid="video-preview"
           :src="videoUrl"
           :muted="isMuted"
           :controls="isFullscreen"
-          class="size-full object-contain"
+          class="block size-full object-contain"
           preload="metadata"
           crossorigin="anonymous"
           playsinline
@@ -183,48 +185,40 @@
         :widget="endFrameWidget"
       />
 
-      <div
-        v-if="hasCrop"
-        class="col-span-full grid grid-cols-subgrid items-center"
-      >
-        <label class="truncate text-node-component-slot-text">
+      <div v-if="hasCrop" class="col-span-full flex items-center gap-2">
+        <label :for="ratioSelectId" class="text-xs text-muted-foreground">
           {{ t('imageCrop.ratio') }}
         </label>
-        <div class="flex min-w-0 items-center gap-1">
-          <Select v-model="selectedRatio" :disabled="!canLockRatio">
-            <SelectTrigger
-              class="h-8 min-w-0 flex-1 text-xs"
-              :aria-label="t('imageCrop.ratio')"
-            >
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem v-for="key in ratioKeys" :key="key" :value="key">
-                {{ key === 'custom' ? t('imageCrop.custom') : key }}
-              </SelectItem>
-            </SelectContent>
-          </Select>
-          <Button
-            size="icon"
-            :variant="isLockEnabled ? 'primary' : 'secondary'"
-            class="size-8 shrink-0"
-            :disabled="!canLockRatio"
-            :aria-label="
+        <Select v-model="selectedRatio" :disabled="!canLockRatio">
+          <SelectTrigger :id="ratioSelectId" class="h-7 w-24 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem v-for="key in ratioKeys" :key="key" :value="key">
+              {{ key === 'custom' ? t('imageCrop.custom') : key }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+        <Button
+          size="icon"
+          :variant="isLockEnabled ? 'primary' : 'secondary'"
+          class="size-7"
+          :disabled="!canLockRatio"
+          :aria-label="
+            isLockEnabled
+              ? t('imageCrop.unlockRatio')
+              : t('imageCrop.lockRatio')
+          "
+          @click="isLockEnabled = !isLockEnabled"
+        >
+          <i
+            :class="
               isLockEnabled
-                ? t('imageCrop.unlockRatio')
-                : t('imageCrop.lockRatio')
+                ? 'icon-[lucide--lock] size-3.5'
+                : 'icon-[lucide--lock-open] size-3.5'
             "
-            @click="isLockEnabled = !isLockEnabled"
-          >
-            <i
-              :class="
-                isLockEnabled
-                  ? 'icon-[lucide--lock] size-3.5'
-                  : 'icon-[lucide--lock-open] size-3.5'
-              "
-            />
-          </Button>
-        </div>
+          />
+        </Button>
       </div>
 
       <WidgetBoundingBox
@@ -256,7 +250,7 @@
 
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
-import { computed, ref, toRef, useTemplateRef, watch } from 'vue'
+import { computed, ref, toRef, useId, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { clamp } from 'es-toolkit'
@@ -330,6 +324,7 @@ const isMuted = ref(false)
 const isFullscreen = ref(false)
 
 const hasTrim = computed(() => features.includes('trim'))
+const ratioSelectId = useId()
 const hasCrop = computed(() => features.includes('crop'))
 
 const effectiveTotalFrames = computed(() => Math.max(totalFrames, 1))
@@ -495,7 +490,7 @@ const metadataRows = computed(() => [
 watch(
   toRef(() => videoUrl),
   () => {
-    playheadFrame.value = 0
+    playheadFrame.value = hasTrim.value ? startFrame.value : 0
     isPlaying.value = false
     videoIntrinsicSize.value = null
   }