Product Video - gets resized when shown on the front end

Technical Q&A
1

I’m trying to figure out if there are any hidden controls on the video_tag control that would allow me to say whether or not a file gets compressed on the front end.

I’ve got a video uploaded to a product. It’s an MP4, at 1920x1080 encoded with H264, at 30 fps, and doesn’t have sound.

But when I insert it in the product page, the video I get is 720p, at 23.97 fps.

This help page says I can upload videos up to 4k resolution, up to 60sec, up to 1 GB. And they need to be mp4 or mov formats.

So, if I can 4k video - where do i tell the variable to use the 4k video?

I’ve got code that looks like this:


  {% for media in product.media %}
    

      {% case media.media_type %}
        {% when 'image' %}
          
        {% when 'video' %}
          {{ media | video_tag: controls: false, autoplay: true }}
      {% endcase %}
    

  {% endfor %}

Note: this is super simplified, but it’s great for explaining the problem.

On the front end, the

Note the .HD-720p-4.5Mbps. in the file name.

So, clearly there’s some options. But how do I access them?

Also, is there any documentation that says when/how shopify will recompress video files?

I expect to see something on this page about the media filters, but there’s only info on changing the poster size.

2

Hi Sam,

Did you get a response or figure out how to do this?

I am facing a similar issue.

Thanks.

3

no, nothing.

4

does the

video_tag: controls: false,

work for you? I’m having trouble hiding controls.

Thanks!

5

video_tag: image_size: ‘1600x’, autoplay: true, loop: true, muted: true, controls: false

works ok