Force Download Image & Video From Metafield

[drsw]

Trying to figure out how to force download a video I uploaded to metafield.

PDF download works as expected, it's just videos and images, they just open and play on new tab instead (I tried removing target="_blank" but they just play on the same tab instead).

I've appended download attribute to the link, but it didn't do anything.

<a class="button" target="_blank" download="{{ file_name }}" title="{{ file_name }}" href="{{ list.sources[1].url }}">DOWNLOAD</a>

Any little bits of help is appreciated.

[ZenoPageBuilder]

Hello @drsw 

The download attribute only works if the image/video URLs are in the same domain of your store.

[drsw]

I see. Is there a way to force the url to come from the same domain then?

I tried to use asset_url filter but it's not working.

I can get the link for pdfs simply by using .url param, but it doesn't work with images and videos. This is how I 'hack' the loop:

{% for list in product.metafields.productDetails.customer_files.value %}
    {% capture indicator %}{{ list }}{% endcapture %}
...
<a class="button" target="_blank" download={{ file_name }} title={{ file_name }} href="
            {% case indicator %}
                {% when 'GenericFileDrop' %}
                    {{ list.url }}
                {% when 'VideoDrop' %}
                    {{ list.sources[1].url }}
                {% else %}
                    https://cdn.shopify.com/s/files/1/0775/6306/8702/{{ list }}
            {% endcase %}
        ">DOWNLOAD</a>
...
{% endfor %}

Actually looking at it again, I don't understand why the pdfs can output the same domain as my store, while the videos get cdn.shopify.com.

[ZenoPageBuilder]

That is how Shopify stores and distributes assets. PDF files are saved on your store, while images/videos are served on Shopify global CDN.