diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 542ecb5d..90e27236 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -11,10 +11,10 @@
             }"
         >
             <img
-                :style="`max-height: ${height}px; max-width: ${width}px; object-fit: contain`"
                 class="w-full"
                 :src="video.thumbnail"
                 :alt="video.title"
+                :class="{ 'shorts-img': short }"
                 loading="lazy"
             />
             <div class="relative text-sm">
@@ -24,7 +24,7 @@
                     v-text="timeFormat(video.duration)"
                 />
                 <!-- shorts thumbnail -->
-                <span class="thumbnail-overlay thumbnail-left" v-if="video.duration <= 60" v-t="'video.shorts'" />
+                <span class="thumbnail-overlay thumbnail-left" v-if="short" v-t="'video.shorts'" />
                 <span
                     class="thumbnail-overlay thumbnail-right"
                     v-else-if="video.duration >= 60"
@@ -124,6 +124,10 @@
 .thumbnail-left {
     @apply bottom-5px left-5px text-xs font-bold bg-red-600 uppercase;
 }
+
+.shorts-img {
+    @apply max-h-[17.5vh] w-full object-contain;
+}
 </style>
 
 <script>
@@ -170,6 +174,11 @@ export default {
             }
         },
     },
+    computed: {
+        short() {
+            return this.video.duration > 0 && this.video.duration <= 60;
+        },
+    },
     components: { PlaylistAddModal },
 };
 </script>