Product Video - gets resized when shown on the front end

SamFP
Shopify Partner
18 1 10

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:

<div class="slideshow">
  {% for media in product.media %}
    <div class="slide">
      {% case media.media_type %}
        {% when 'image' %}
          <img src="{{ image | img_url: 'master' }}" />
        {% when 'video' %}
          {{ media | video_tag: controls: false, autoplay: true }}
      {% endcase %}
    </div>
  {% endfor %}
</div>

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

On the front end, the <video> tag includes the source as <source src="https://cdn.shopify.com/videos/c/vp/123456789012345678901234567890/123456789012345678901234567890.HD..." type="video/mp4">

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.

Replies 4 (4)

THSC_dot_London
Visitor
1 0 0

Hi Sam,

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

I am facing a similar issue.

Thanks.

 

SamFP
Shopify Partner
18 1 10

no, nothing.

FurnaceX
Shopify Partner
49 2 48

does the

video_tag: controls: false,

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

 

Thanks!

SaeedArshad
Shopify Partner
1 0 0

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

works ok