Video Tag

Store Design
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: