Product Video - gets resized when shown on the front end

Highlighted
Tourist
12 1 2

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.

0 Likes