Video Tag

Store Design

Topic summary

A developer encountered a Liquid syntax error when trying to add a poster image URL to Shopify’s video_tag filter. The issue stemmed from nested Liquid syntax within the poster parameter.

Initial Problem:

  • Attempting to use poster:"{{ section.settings.cover_image | img_url: 'master' }}" caused an “Unexpected character” error
  • The nested curly braces and quotes created invalid Liquid syntax

Solution:
The working approach involved two steps:

  1. Assign the poster URL to a variable first: {% assign poster = block.settings.cover_image | img_url: 'master' %}
  2. Reference the variable in the video_tag: poster: poster

This separated the image URL processing from the video_tag parameters, avoiding nested Liquid syntax issues.

Status: Resolved. The poster image now displays correctly on the video element.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

How can I add a video poster URL on the video_tag? I get this issue

Liquid syntax error (line 17): Unexpected character " in “{{ block.settings.video | video_tag: autoplay: false, loop: true, muted: false, controls: true, image_size: “600px”, poster:”{{ section.settings.cover_image | img_url: ‘master’ }}"

This is my code

{{ block.settings.video | video_tag: autoplay: false, loop: true, muted: false, controls: true, image_size: "600x", poster:"{{ section.settings.cover_image | img_url: 'master' }}" }}

{% schema %}
  {
    "name": "Videos",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "Videos Section"
      }, {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      }, {
        "type": "text",
        "id": "button_label",
        "label": "Button Label",
        "default": "Shop Now"
      }
    ],
    "max_blocks": 4,
    "blocks": [
      {
        "type": "video",
        "name": "Video",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Title",
            "default": "Lorem ipsum dolor sit amet. Lorem ipsum"
          }, {
            "type": "video",
            "id": "video",
            "label": "A Shopify-hosted video"
          }          ,{
      "type": "image_picker",
      "id": "cover_image",
      "label": "poster"
    }
        ]
      }
    ]
  }
{% endschema %}
2

@Paulodezine Try this

{{ block.settings.video | video_tag: autoplay: false, loop: true, muted: false, controls: true, image_size: “600x”, poster: section.settings.cover_image | img_url: ‘master’ }}

if this helps like it and mark it as solution.

For further contact in future for any web development related queries reach out at

Email

Buy me Coffee if you were stuck and i managed to help. I hope it does.

thanks anyways

3

Hi @Paulodezine ,

Please change code:

{{ block.settings.video 
          | video_tag: 
            autoplay: false, 
            loop: true, 
            muted: false, 
            controls: true, 
            image_size: "600x", 
            poster: block.settings.video.preview_image | default: block.settings.cover_image
          }}
4

Small changes it needs to be this

{{ block.settings.video | video_tag: autoplay: false, loop: true, muted: false, controls: true, image_size: “600x”, poster: block.settings.cover_image | img_url: ‘master’ }}

5

For some reason it doesnt render the whole video block

6

It renders this one

<video playsinline=“playsinline” loop=“loop” controls=“controls” poster=“files/preview_images/ef52aabe0c2a495aa3fc8e6f0b527a24.thumbnail.0000000000.jpg” preload=“metadata”

doesn’t get the image uploaded

7

@Paulodezine Did you get the poster image? atleast that would be a start. Please also share your url and a screenshot of the section you are talking about.

Thanks

8

Hi @Paulodezine ,

Please change code:

{% assign poster = block.settings.cover_image | img_url: 'master' %}
  {{ block.settings.video 
          | video_tag: 
            autoplay: false, 
            loop: true, 
            muted: false, 
            controls: true, 
            image_size: "600x", 
            poster: poster
          }}
9

you are a legend!!! this works perfectly @namphan

Thank you!

10

Hi @Paulodezine ,

If you have any questions, you can contact me directly.

Happy to help you :blush: