Video connected to 'Image with Text' using dynamic content/metaobject not playing

[moonturndesign]

Hi! I am trying to add a short video into the ‘Image with Text’ section as a Hero, I did have a gif in its place but we started experincing issues with site speed so I am trying to change it to a much smaller video file to hopefully help that..

I have the video upload to Shopify and set-up as a metaobject and then connected to the image with text section as dynamic content but the video only shows as a static image and will not play. Is there a way to get this video to autoplay/loop (preferable)? Or is there a way to add an option for a video within the image with text section?

I tried a few css additions that did not work, and I don’t want to lose the existing set-up/design of that section at all I just want the video to play…

Here is the metaobject set up/dynamic content in the image with text:

The store URL is lunaescent.com (for now the video is there but might not keep it long bc the site is live and its not working) THANKS IN ADVANCE!!

[Shadab_dev]

Since it’s an image with text section, it doesn’t allow for video. To play that video it will need some js code.

Or much better option is to edit the section file to include video as well. We can add html video to it directly with all available controls like autoplay and loop without writing js code. It also gives you as the merchant a setting in the customizer to edit or replace the video as you go.

Best

[moonturndesign]

sounds like what I am looking for, how do I do that?

[Shadab_dev]

Well you have to edit code. From the dashboard beside the edit theme button, click on the three dots and edit code. From the code editor look for image-with-text.liquid file under sections. That is where you need the edits.

If you have some code knowledge and want to do it yourself, just copy the whole code inside that file, paste to chatgpt and explain exactly what you need.

Also never make any code edits to the live theme, always make a duplicate, test on that and then either transfer code or publish that duplicate theme.

Best

[moonturndesign]

Thanks for the advice! I did put it into chatgbt (was not confident) and it worked great! thanks!

Here is the code for anyone else since I search for HOURS without finding anything useful. Replace the entire sections > image.with.text.liquid with this code:

{{ 'component-image-with-text.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

  .image-with-text__media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
{%- endstyle -%}

{%- liquid
  assign fetch_priority = 'auto'
  if section.index == 1
    assign fetch_priority = 'high'
  endif

  if section.settings.color_scheme == section.settings.section_color_scheme and section.settings.content_layout == 'no-overlap'
    assign remove_color_classes = true
  endif
-%}

<div class="section-{{ section.id }}-padding gradient color-{{ section.settings.section_color_scheme }}">
  <div class="page-width">
    <div class="image-with-text image-with-text--{{ section.settings.content_layout }} isolate{% if settings.text_boxes_border_thickness > 0 and settings.text_boxes_border_opacity > 0 and settings.media_border_thickness > 0 and settings.media_border_opacity > 0 %} collapse-borders{% endif %}{% unless section.settings.color_scheme == section.settings.section_color_scheme and settings.media_border_thickness > 0 and settings.text_boxes_shadow_opacity == 0 and settings.text_boxes_border_thickness == 0 or settings.text_boxes_border_opacity == 0 %} collapse-corners{% endunless %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">

      <div class="image-with-text__grid grid grid--gapless grid--1-col grid--{% if section.settings.desktop_image_width == 'medium' %}2-col-tablet{% else %}3-col-tablet{% endif %}{% if section.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %}">

        <!-- MEDIA -->
        <div class="image-with-text__media-item image-with-text__media-item--{{ section.settings.desktop_image_width }} image-with-text__media-item--{{ section.settings.desktop_content_position }} grid__item">

          <div
            class="image-with-text__media image-with-text__media--{{ section.settings.height }} global-media-settings{% unless remove_color_classes %} gradient color-{{ section.settings.color_scheme }}{% else %} background-transparent{% endunless %}{% if section.settings.image != blank or section.settings.video != blank %} media{% else %} image-with-text__media--placeholder placeholder{% endif %}{% if section.settings.image_behavior != 'none' and section.settings.media_type == 'image' %} animate--{{ section.settings.image_behavior }}{% endif %}"
            {% if section.settings.height == 'adapt' %}
              {% if section.settings.media_type == 'image' and section.settings.image != blank %}
                style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"
              {% elsif section.settings.media_type == 'video' and section.settings.video != blank %}
                {% if section.settings.video.aspect_ratio %}
                  style="padding-bottom: {{ 1 | divided_by: section.settings.video.aspect_ratio | times: 100 }}%;"
                {% endif %}
              {% endif %}
            {% endif %}
          >

            {%- if section.settings.media_type == 'video' and section.settings.video != blank -%}

              {{
                section.settings.video
                | video_tag:
                  autoplay: section.settings.video_autoplay,
                  loop: section.settings.video_loop,
                  muted: section.settings.video_muted,
                  controls: section.settings.video_controls,
                  playsinline: true,
                  image_size: '1500x'
              }}

            {%- elsif section.settings.media_type == 'image' and section.settings.image != blank -%}

              {%- if section.settings.image_behavior == 'ambient' or section.settings.image_behavior == 'zoom-in' -%}

                {%- assign widths = '198, 432, 642, 900, 1284, 1800' -%}

                {%- capture sizes -%}
                  (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1.6667 }}px,
                  (min-width: 750px) calc((100vw - 130px) / 1.667),
                  calc((100vw - 50px) / 1.667)
                {%- endcapture -%}

              {%- else -%}

                {%- assign widths = '165, 360, 535, 750, 1070, 1500' -%}

                {%- capture sizes -%}
                  (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px,
                  (min-width: 750px) calc((100vw - 130px) / 2),
                  calc((100vw - 50px) / 2)
                {%- endcapture -%}

              {%- endif -%}

              {{
                section.settings.image
                | image_url: width: 1500
                | image_tag:
                  sizes: sizes,
                  widths: widths,
                  fetchpriority: fetch_priority
              }}

            {%- else -%}

              {{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}

            {%- endif -%}

          </div>
        </div>

        <!-- TEXT -->
        <div class="image-with-text__text-item grid__item">

          <div
            id="ImageWithText--{{ section.id }}"
            class="image-with-text__content image-with-text__content--{{ section.settings.desktop_content_position }} image-with-text__content--desktop-{{ section.settings.desktop_content_alignment }} image-with-text__content--mobile-{{ section.settings.mobile_content_alignment }} image-with-text__content--{{ section.settings.height }} content-container{% unless remove_color_classes %} gradient color-{{ section.settings.color_scheme }}{% else %} background-transparent{% endunless %}"
          >

            {%- for block in section.blocks -%}

              {% case block.type %}

                {%- when 'heading' -%}

                  <h2
                    class="image-with-text__heading inline-richtext {{ block.settings.heading_size }}"
                    {{ block.shopify_attributes }}
                  >
                    {{ block.settings.heading }}
                  </h2>

                {%- when 'caption' -%}

                  <p
                    class="image-with-text__text image-with-text__text--caption {{ block.settings.text_style }} {{ block.settings.text_style }}--{{ block.settings.text_size }} {{ block.settings.text_style }}"
                    {{ block.shopify_attributes }}
                  >
                    {{ block.settings.caption | escape }}
                  </p>

                {%- when 'text' -%}

                  <div
                    class="image-with-text__text rte {{ block.settings.text_style }}"
                    {{ block.shopify_attributes }}
                  >
                    {{ block.settings.text }}
                  </div>

                {%- when 'button' -%}

                  {%- if block.settings.button_label != blank -%}

                    <a
                      {% if block.settings.button_link == blank %}
                        role="link" aria-disabled="true"
                      {% else %}
                        href="{{ block.settings.button_link }}"
                      {% endif %}
                      class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"
                      {{ block.shopify_attributes }}
                    >
                      {{ block.settings.button_label | escape }}
                    </a>

                  {%- endif -%}

              {%- endcase -%}

            {%- endfor -%}

          </div>
        </div>

      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.image-with-text.name",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },

  "settings": [

    {
      "type": "select",
      "id": "media_type",
      "options": [
        {
          "value": "image",
          "label": "Image"
        },
        {
          "value": "video",
          "label": "Video"
        }
      ],
      "default": "image",
      "label": "Media type"
    },

    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },

    {
      "type": "video",
      "id": "video",
      "label": "Video",
      "info": "Upload or select a video from your Shopify Files."
    },

    {
      "type": "checkbox",
      "id": "video_autoplay",
      "default": true,
      "label": "Autoplay video"
    },

    {
      "type": "checkbox",
      "id": "video_loop",
      "default": true,
      "label": "Loop video"
    },

    {
      "type": "checkbox",
      "id": "video_muted",
      "default": true,
      "label": "Mute video"
    },

    {
      "type": "checkbox",
      "id": "video_controls",
      "default": false,
      "label": "Show video controls"
    },

    {
      "type": "select",
      "id": "height",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.image-with-text.settings.height.options__1.label"
        },
        {
          "value": "small",
          "label": "t:sections.image-with-text.settings.height.options__2.label"
        },
        {
          "value": "medium",
          "label": "t:sections.image-with-text.settings.height.options__3.label"
        },
        {
          "value": "large",
          "label": "t:sections.image-with-text.settings.height.options__4.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.image-with-text.settings.height.label"
    },

    {
      "type": "select",
      "id": "desktop_image_width",
      "options": [
        {
          "value": "small",
          "label": "t:sections.image-with-text.settings.desktop_image_width.options__1.label"
        },
        {
          "value": "medium",
          "label": "t:sections.image-with-text.settings.desktop_image_width.options__2.label"
        },
        {
          "value": "large",
          "label": "t:sections.image-with-text.settings.desktop_image_width.options__3.label"
        }
      ],
      "default": "medium",
      "label": "t:sections.image-with-text.settings.desktop_image_width.label"
    },

    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "image_first",
          "label": "t:sections.image-with-text.settings.layout.options__1.label"
        },
        {
          "value": "text_first",
          "label": "t:sections.image-with-text.settings.layout.options__2.label"
        }
      ],
      "default": "image_first",
      "label": "t:sections.image-with-text.settings.layout.label"
    },

    {
      "type": "select",
      "id": "image_behavior",
      "options": [
        {
          "value": "none",
          "label": "t:sections.all.animation.image_behavior.options__1.label"
        },
        {
          "value": "ambient",
          "label": "t:sections.all.animation.image_behavior.options__2.label"
        },
        {
          "value": "zoom-in",
          "label": "t:sections.all.animation.image_behavior.options__4.label"
        }
      ],
      "default": "none",
      "label": "t:sections.all.animation.image_behavior.label"
    },

    {
      "type": "header",
      "content": "t:sections.image-with-text.settings.header.content"
    },

    {
      "type": "select",
      "id": "content_layout",
      "options": [
        {
          "value": "no-overlap",
          "label": "t:sections.image-with-text.settings.content_layout.options__1.label"
        },
        {
          "value": "overlap",
          "label": "t:sections.image-with-text.settings.content_layout.options__2.label"
        }
      ],
      "default": "no-overlap",
      "label": "t:sections.image-with-text.settings.content_layout.label"
    },

    {
      "type": "select",
      "id": "desktop_content_position",
      "options": [
        {
          "value": "top",
          "label": "t:sections.image-with-text.settings.desktop_content_position.options__1.label"
        },
        {
          "value": "middle",
          "label": "t:sections.image-with-text.settings.desktop_content_position.options__2.label"
        },
        {
          "value": "bottom",
          "label": "t:sections.image-with-text.settings.desktop_content_position.options__3.label"
        }
      ],
      "default": "top",
      "label": "t:sections.image-with-text.settings.desktop_content_position.label"
    },

    {
      "type": "select",
      "id": "desktop_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-with-text.settings.desktop_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-with-text.settings.desktop_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-with-text.settings.desktop_content_alignment.options__3.label"
        }
      ],
      "default": "left",
      "label": "t:sections.image-with-text.settings.desktop_content_alignment.label"
    },

    {
      "type": "select",
      "id": "mobile_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-with-text.settings.mobile_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-with-text.settings.mobile_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-with-text.settings.mobile_content_alignment.options__3.label"
        }
      ],
      "default": "left",
      "label": "t:sections.image-with-text.settings.mobile_content_alignment.label"
    },

    {
      "type": "header",
      "content": "t:sections.image-with-text.settings.header_colors.content"
    },

    {
      "type": "color_scheme",
      "id": "section_color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    },

    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.multirow.settings.container_color_scheme.label",
      "default": "scheme-1"
    },

    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },

    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },

    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }

  ],

  "blocks": [

    {
      "type": "heading",
      "name": "t:sections.image-with-text.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "t:sections.image-with-text.blocks.heading.settings.heading.default",
          "label": "t:sections.image-with-text.blocks.heading.settings.heading.label"
        },
        {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "h2",
              "label": "t:sections.all.heading_size.options__1.label"
            },
            {
              "value": "h1",
              "label": "t:sections.all.heading_size.options__2.label"
            },
            {
              "value": "h0",
              "label": "t:sections.all.heading_size.options__3.label"
            },
            {
              "value": "hxl",
              "label": "t:sections.all.heading_size.options__4.label"
            },
            {
              "value": "hxxl",
              "label": "t:sections.all.heading_size.options__5.label"
            }
          ],
          "default": "h1",
          "label": "t:sections.all.heading_size.label"
        }
      ]
    },

    {
      "type": "caption",
      "name": "t:sections.image-with-text.blocks.caption.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "caption",
          "default": "t:sections.image-with-text.blocks.caption.settings.text.default",
          "label": "t:sections.image-with-text.blocks.caption.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "subtitle",
              "label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__1.label"
            },
            {
              "value": "caption-with-letter-spacing",
              "label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__2.label"
            }
          ],
          "default": "caption-with-letter-spacing",
          "label": "t:sections.image-with-text.blocks.caption.settings.text_style.label"
        },
        {
          "type": "select",
          "id": "text_size",
          "options": [
            {
              "value": "small",
              "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__1.label"
            },
            {
              "value": "medium",
              "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__2.label"
            },
            {
              "value": "large",
              "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__3.label"
            }
          ],
          "default": "medium",
          "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.label"
        }
      ]
    },

    {
      "type": "text",
      "name": "t:sections.image-with-text.blocks.text.name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "t:sections.image-with-text.blocks.text.settings.text.default",
          "label": "t:sections.image-with-text.blocks.text.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "t:sections.image-with-text.blocks.text.settings.text_style.options__1.label"
            },
            {
              "value": "subtitle",
              "label": "t:sections.image-with-text.blocks.text.settings.text_style.options__2.label"
            }
          ],
          "default": "body",
          "label": "t:sections.image-with-text.blocks.text.settings.text_style.label"
        }
      ]
    },

    {
      "type": "button",
      "name": "t:sections.image-with-text.blocks.button.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label",
          "default": "t:sections.image-with-text.blocks.button.settings.button_label.default",
          "label": "t:sections.image-with-text.blocks.button.settings.button_label.label",
          "info": "t:sections.image-with-text.blocks.button.settings.button_label.info"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary",
          "default": false,
          "label": "t:sections.image-with-text.blocks.button.settings.outline_button.label"
        }
      ]
    }

  ],

  "presets": [
    {
      "name": "t:sections.image-with-text.presets.name",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "button"
        }
      ]
    }
  ]
}
{% endschema %}

[Ploqo]

The probelm is solved already. But i have already set it up on my store. So anyway here is how i solved it.

It might help for something extra.

On Dawn, the “Image with text” section only outputs an image tag.

When you connect a video file to the Image slot as dynamic content, it just shows the first frame.

Edit 1 - the section file. Online Store > Themes, click the three dots next to Customize > Edit code. Open sections/image-with-text.liquid.

Find this line (it sits just inside the media area):

{%- if section.settings.image != blank -%}

Replace that one line with this block:

{%- if section.settings.video != blank -%}
  {{ section.settings.video | video_tag: image_size: '1100x', autoplay: true, loop: true, muted: true, controls: false, playsinline: true, class: 'image-with-text__video' }}
  <style>
    .image-with-text__media:has(> .image-with-text__video) { position: relative; overflow: hidden; }
    .image-with-text__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  </style>
{%- elsif section.settings.image != blank -%}

Edit 2 - add the Video setting. Scroll to the {% schema %} at the bottom of the same file. Find the image setting:

{
  "type": "image_picker",
  "id": "image",
  "label": "t:sections.image-with-text.settings.image.label"
},

Add this right after it:

{
  "type": "video",
  "id": "video",
  "label": "Video",
  "info": "Autoplays muted and loops. Use Height Small, Medium or Large."
},

Save.

Pick the video. Open the customizer, open your Image with text (Hero) section. A new Video setting is now there.

• Pick your uploaded video in it, or click the dynamic source icon on that setting and pick your existing Hero Video metaobject (so you keep your current setup).
• Set Height to Small, Medium or Large (not Adapt).
• Save.

The video now autoplays, loops, is muted (needed for autoplay), and covers the media area exactly like the image did. Nothing else in the section changes.

If you would rather not touch code, apps like Videowise or Easy Video Background add autoplay video sections.

Tested on a Dawn store: video plays and loops in the Image with text hero, filling the same area as the image.

Regards,
Ajay

[Shadab_dev]

Glad it worked out for you. With ai now, as merchants there is much great control over these small customizations.

Best