Why on earth does Shopify completely screw up video uploads?

Shopify Discussion
,
1

There is no way to access the original video uploads on products. The media object sources only have Shopify’s messed up recompressed mp4 url’s.

This means you are on the mercy of Shopify’s horrible compression and abysmally large file sizes that completely ruin every performance optimization. You simply can not use webm videos or your better compressed originally uploaded mp4’s. There is no reference to the actual uploaded file on assets in the liquid objects.

What an absolutely horrible design decision.

2 Likes
2

Hey @Tryhard

I understand your frustration with Shopify’s media handling, especially when it comes to video compression and performance optimization. Unfortunately, Shopify does automatically compress uploaded videos and doesn’t provide direct access to the original files through Liquid objects.

As a workaround, you could consider hosting the videos externally on a CDN or another platform that allows better compression options, and then linking to those URLs in your Shopify theme. This way, you can have more control over the video quality and file size.

3

Here is a filthy hack for anyone else frustrated with this issue:

{% liquid 
      assign video_url = media.preview_image.src | replace: "files/preview_images/", "" | split: "."
      assign video_url = "https://cdn.shopify.com/videos/c/o/v/" | append: video_url[0] | append:".mp4" 
%}

Explanation:

Since shopify creates a preview_image for the uploaded videos, we can use the url of the image to extract the hashed string (filename) that shopify uses for the original file. We also know that shopify hosts videos at “https://cdn.shopify.com/videos/c/o/v/” (for now), so with that we can glue together the actual url of the original file: {cdn_url}+{hash}+{file_extension}

You are welcome.

2 Likes
4

I’m so happy to see others are frustrated with Shopify’s unoptimized and recompressing of video MP4 files.

Could you please explain where this code should be placed? I’d really appriciate it!

5

It depends on the theme you are using as this is liquid code. I used it in the media gallery portion of my product page (product-preview-image.liquid).

With other code, I am first checking if the product media is a video, and if it is, I am using this code to get the original file url instead of the one compressed one Shopify gives.

I have a highly custom template, so your code is probably located elsewhere. I also don’t even use shopify’s templating anymore and have a custom headless shopify store, using SvelteKit hosted on Vercel. I now get 100% performance score from Google Lighthouse (small brag).

6

Thank you so much for taking the time to reply! And congrats on your success with going custom!

I’ve reached out to my theme builder to see if they can address the video issue directly. Below is some additional info. I’ve been able to pinpoint exactly where the problem is occurring. If you’re up for it, it’d be awesome if you could take a look and let me know where the liquid code you reference might need to be plugged.

So, in my theme “Video Hero” section, I select the media video file I’ve uploaded to shopify.

The exact code in the liquid file that calls and renders the video looks like this:

{% render 'native-video' with video: section.settings.video, autoplay: true, loop: true, muted: true, overlay: false, controls: false %}

That code is contained within a couple of DIVs.

The “native-video” that is referenced is another Liquid file that is being called to create the

In the “native-video.liquid” file, the code looks like this:


      

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

When the page is loaded, the

As you can see, instead of using the source src from the actual compressed mp4 file, Shopify is calling an src for some random file they generated that has worse compression. My file is 255 KB, their file is 1 MB!

Any advice would be appreciated! I’m pretty sure I’ve pinpointed the issue, so now I’m just trying to come up with a solution.

I’ve also created a discussion post regarding this issue, but no comments yet.

1 Like
7

Edit: I edited this so that your native-video.liquid snippet doesn’t break everywhere else in your website.

Replace this:

{% render 'native-video' with video: section.settings.video, autoplay: true, loop: true, muted: true, overlay: false, controls: false %}

With this:

{% liquid 
  assign media = section.settings.video
  assign video_url = media.preview_image.src | replace: "files/preview_images/", "" | split: "."
  assign video_url = "https://cdn.shopify.com/videos/c/o/v/" | append: video_url[0] | append:".mp4" 
%}
1 Like