How to display the product meatfield video with control?

Shopify Discussion
1

I’m create the video metafield to individual product. It’s normally loading without control of HTML5 video.

Following code added on liquid file
{{ product.metafields.custom.middle_video_section | metafield_tag }}

Please let me know any suggestion or solution

2

Hello @maniellowww ,

It’s the GemPages Support Team and we are glad to assist you today!

Could you share the content (video code) that you added in the metafield?

Best regards,
GemPages Support Team

3

Hi @GemPages ,
Please refer the screenshot. We have create the product metafield.
For displaying the front end (liquild) using the {{ product.metafields.custom.middle_video_section | metafield_tag }}
Refer the following link : https://shopify.dev/docs/api/liquid/filters/metafield_tag

maniellowww_0-1680604180805.png
maniellowww_0-1680604180805.png896×866 45.3 KB

1 Like
4

Hi @maniellowww ,

You could please try using the Multi-line text type instead of File type

GemPages_0-1680666059322.png
GemPages_0-1680666059322.png1602×967 61.4 KB

After that, you could please enter the content like that

You can upload the video to the Shopify File to get URL.

Let us know how it works for you.

Best regards,
GemPages Support Team

5

Hi i tried this, however i am experience an issue where my multiline metafield data, is shown as a string. Rather than a object

ChristianThrige_0-1703244199636.png
ChristianThrige_0-1703244199636.png2216×1336 611 KB

6

Did you find a solution? I am having the same problem :disappointed_face:

8

you can simply render it with the video_tag and use the metafield value as source

{{ product.metafields.custom.middle_video_section.value | video_tag: image_size: ‘2500x’, autoplay: true, loop: video_loop, muted: true, controls: controls }}

info about the video_tag