CODEWITHSUNDEEP
shopifyliquid
Anta
Anta

Reputation: 151

Shopify liquid get raw video url

In Shopify liquid, I am trying to render a video block from a section.

I have my own wrapped, so I simply want to get a raw URL; but nothing seems to work. This won't return a proper url:

<video class="video" loop muted autoplay playsinline>
  <source src="{{ block.settings.video | file_url }}" type="video/mp4">
</video>

And this will create a whole video HTML element, that I don't want:

{{ block.settings.video | media_tag }}

Here is the schema for this field:

  {
    "name": "Video",
    "type": "video",
    "settings": [
      {
        "type": "video",
        "id": "video",
        "label": "Video"
      }
    ]
  }

Does someone know how can I get an url only?

Thanks,

Upvotes: 1

Views: 12348

Answers (2)

Adam Colton
Adam Colton

Reputation: 319

Also you can create a section with video picker

{% schema %}{
  "name": "Video",
  "class": "video-section",
  "settings": [
    {
      "type": "video",
      "id": "video",
      "label": "A Shopify-hosted video"
    }
  ],
  "presets": [
    {
      "name": "Video"
    }
  ]
}
{% endschema %}
{% if section.settings.video != blank %}
      <video src="{{section.settings.video.sources[1].url}}" loop muted playsinline autoplay></video>
    {% endif %}

Upvotes: 2

Onkar
Onkar

Reputation: 2584

Okay, here you can see the video input type into Shopify documentation Link enter image description here enter image description here

You can see it returns the video object or null if no video is selected.

In video object the following data is associated: enter image description here

Here into video sources enter image description here

You can see the URL params to return the URL, so you need to get this URL like, sources return array of URL type so access specific URL like this

{{block.settings.video.sources[0].url}}

Upvotes: 4

Related Questions