Video Section should support Video Files & Metafields

Shopify / dawn

Shopify's first source available reference theme, with Online Store 2.0 features and performance built-in.

Other

2.47k stars 3.31k forks source link

Video Section should support Video Files & Metafields #1687

Open bredowmax opened 2 years ago

bredowmax commented 2 years ago

Describe the enhancement you'd like Currently, the only option of the video section is to upload a video on Youtube or Vimeo and then add that link. On top of that, this input field does not currently support Metafields. This makes it impossible to add product-specific or page-specific videos without custom-editing the Dawn theme

Describe alternatives you've considered

Upload via Youtube - this works for 1 link. It is not possible to connect any metafields without custom code. Further, using Youtube allows visitor to click on the Youtube logo and may lead to distraction and decreased conversion.
Use the product media to display videos in PDP. This may work ok for products - but not for collections, pages or blog articles
Custom code. Possible to build in workarounds - but time consuming

Additional context/screenshots

(interestingly, the video file can be connected to any field that takes image files. I can connect my Video File Metafield to an image setting like 'Cover Image' - it just won't play)

bacounts commented 2 years ago

Cc for triage: @nicklepine @tyleralsbury

bredowmax commented 2 years ago

Any update on this @nicklepine @tyleralsbury ? This became more useful in particular after this update https://changelog.shopify.com/posts/improved-video-support-for-the-files-page-and-metafields

orditeck commented 1 year ago

Not a direct solution but I thought I'd share one of the possible approaches for a "Custom Code Solution" since I think it can be useful for folks searching for this on search engines.

The following can be used to generate a <video> tag for a metafield that contains a video:

{% assign media = product.metafields.custom.some_image_or_video.value %}
{% if media.media_type == 'video' %}
  {{ media | video_tag: image_size: '1000x', controls: true, autoplay: true }}
{% endif %}

The assign part is just to better readability.
custom.some_image_or_video would be your namespace.key.

Justyboy commented 1 year ago

I am still stuck on this. I have tried bringing over the metafield as a video file, a text field, and url field! Nothing works. Hope someone will post a solution here. Thank you.