Why is Shopify automatically recompressing my MP4 videos to a larger file size on page load?

Technical Q&A

Topic summary

Shopify is serving an auto-transcoded version of an uploaded MP4, resulting in a larger file on page load.

  • Context: In the FLOW theme, a banner video uploaded to Shopify Files (255 KB) is selected in Theme settings.
  • Observation: The page loads a different URL (cdn.shopify.com/videos/c/vp/… SD-480p-0.9Mbps…), which is ~1 MB—about 4x larger than the original (cdn.shopify.com/videos/c/o/v/…).
  • Technical detail: The Liquid filter video_tag is used to render the video element:
    {{ video | video_tag: autoplay: autoplay, loop: loop, muted: muted, controls: controls, data-selector: "native-video", class: 'hero-video-mp4', image_size: '1100x'}}
  • Behavior: Shopify’s video_tag API generates the HTML
  • Question: Is there a parameter or method to force video_tag to use the original file URL rather than the Shopify-generated variant?

Status: No solution provided yet; the user is still seeking a way to load the original compressed file. Code snippet and URLs are central to understanding the issue.

Summarized with AI on January 15. AI used: gpt-5.
1

I’m using the FLOW theme for Shopify. Here is a link to my website.

Some of the sections allow for selecting and showing videos that have been uploaded to Shopify Files.

2023-10-19 15_27_04-Window.png
2023-10-19 15_27_04-Window.png338×377 40.1 KB

I created a compressed version of a banner video and uploaded it. Its file size is only 255 KB.

This is the video that I’ve uploaded to files and am selecting

When my webpage loads, instead different video file is loaded that has a 1 MB file size.

This is the video that my website is loading

Can anyone help me understand what is happening, and how I can have my website load the compressed video files I created and not these other files?

2

Still looking for a solution, but here is more information based on further research and testing…

Here is the code where the issue resides:


      

        {{ video | video_tag: autoplay: autoplay, loop: loop, muted: muted, controls: controls, data-selector: "native-video", class: 'hero-video-mp4', image_size: '1100x'}}

In the Theme settings, I select my video uploaded to Shopify Files, like in my previous reference image.

Instead of calling the uploaded file’s exact “source src”, Shopify instead plugs in its own generated file src. The Shopify-generated file has a 4x larger file size.

Shopify’s API “video_tag” generates the html

Is there a value I can enter into this line of code that forces Shopify to call my files URL, and not their generated URL? Or is there another solution?