diff --git a/ui/v2.5/src/components/Images/ImageDetails/Image.tsx b/ui/v2.5/src/components/Images/ImageDetails/Image.tsx
index dda47e9d2..b9485767c 100644
--- a/ui/v2.5/src/components/Images/ImageDetails/Image.tsx
+++ b/ui/v2.5/src/components/Images/ImageDetails/Image.tsx
@@ -25,6 +25,7 @@ import { ImageDetailPanel } from "./ImageDetailPanel";
 import { DeleteImagesDialog } from "../DeleteImagesDialog";
 import { faEllipsisV } from "@fortawesome/free-solid-svg-icons";
 import { objectPath, objectTitle } from "src/core/files";
+import { isVideo } from "src/utils/visualFile";
 
 interface IImageParams {
   id?: string;
@@ -260,8 +261,7 @@ export const Image: React.FC = () => {
   }
 
   const title = objectTitle(image);
-  const ImageView =
-    image.visual_files[0].__typename == "VideoFile" ? "video" : "img";
+  const ImageView = isVideo(image.visual_files[0]) ? "video" : "img";
 
   return (
     <div className="row">
diff --git a/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx b/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx
index 8cadd2d54..cfe1d5db3 100644
--- a/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx
+++ b/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx
@@ -47,6 +47,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { RatingSystem } from "src/components/Shared/Rating/RatingSystem";
 import { useDebounce } from "../debounce";
+import { isVideo } from "src/utils/visualFile";
 
 const CLASSNAME = "Lightbox";
 const CLASSNAME_HEADER = `${CLASSNAME}-header`;
@@ -850,7 +851,7 @@ export const LightboxComponent: React.FC<IProps> = ({
                   scrollAttemptsBeforeChange={scrollAttemptsBeforeChange}
                   setZoom={(v) => setZoom(v)}
                   resetPosition={resetPosition}
-                  isVideo={image.visual_files?.[0]?.__typename == "VideoFile"}
+                  isVideo={isVideo(image.visual_files?.[0] ?? {})}
                 />
               ) : undefined}
             </div>
diff --git a/ui/v2.5/src/hooks/Lightbox/types.ts b/ui/v2.5/src/hooks/Lightbox/types.ts
index f955a060a..e98fb48f4 100644
--- a/ui/v2.5/src/hooks/Lightbox/types.ts
+++ b/ui/v2.5/src/hooks/Lightbox/types.ts
@@ -10,6 +10,7 @@ interface IFiles {
   __typename?: string;
   width: number;
   height: number;
+  video_codec?: GQL.Maybe<string>;
 }
 
 export interface ILightboxImage {
diff --git a/ui/v2.5/src/utils/visualFile.ts b/ui/v2.5/src/utils/visualFile.ts
new file mode 100644
index 000000000..c88aa83ec
--- /dev/null
+++ b/ui/v2.5/src/utils/visualFile.ts
@@ -0,0 +1,9 @@
+import { Maybe } from "src/core/generated-graphql";
+
+// returns true if the file should be treated as a video in the UI
+export function isVideo(o: {
+  __typename?: string;
+  video_codec?: Maybe<string>;
+}) {
+  return o.__typename == "VideoFile" && o.video_codec != "gif";
+}