How can I incorporate a video into image with text on Sense theme?

Store Design

Topic summary

A user asks how to add a video section with text overlay to the Sense theme without using paid apps. A community member provides a detailed code solution involving creating a custom Liquid section called ‘video_with_text’ through the theme editor.

The solution includes:

  • Step-by-step instructions for adding the section via Admin > Theme > Edit Code
  • Complete Liquid code supporting both MP4 uploads and YouTube/Vimeo embeds
  • Customizable options for autoplay, background colors, headings, and buttons

Common issues reported:

  • Video not displaying on mobile devices
  • YouTube/Vimeo connection errors (“refused connection”)
  • Buttons not appearing or functioning properly
  • Autoplay feature not working despite being enabled
  • Section appearing on all pages instead of specific ones
  • Theme compatibility problems (particularly with Galleria theme)
  • Video controls not removable when autoplay is desired

While the initial poster confirms the solution worked, multiple subsequent users encounter implementation challenges. An alternative video tutorial is shared for a more universal approach. The discussion remains open with several unresolved technical questions about mobile responsiveness, autoplay functionality, and page-specific placement.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
2

hello, @Chapee45

video with text section code given below. and follow some steps.

  1. Go to the admin >> theme >> edit code >> sections >> add a new section with the name ‘video_with_text’.

  2. When section created then copy the given code and paste into the created section.

copy code from here.

{{ section.settings.heading }}

{{ section.settings.content }}

{% if section.settings.select == 'MP4' %} {% if section.settings.vid != blank %} {% endif %} {% else %} {% if section.settings.i_vid != blank %} {% endif %} {% endif %}
.vid-text-wra { margin-top: 30px; padding-top: 40px; padding-bottom: 40px; } .vid-with-text-box { display: flex; align-items: center; padding: 20px 30px; } .text-content { width: 50%; padding: 50px 30px 40px; } .content h2 { font-size: 28px; line-height: 36px; padding-bottom: 20px; } .content p { font-size: 18px; letter-spacing: 0.5px; } .video-section { width: 50%; height: 100%; } .m_video { height: 100%; } .m_video video { height: 100%; width: 100%; object-fit: cover; } .section-btn { margin-top: 40px; } {% if section.settings.revrt %} #vid-txt-{{ section.id }} .vid-with-text-box{ flex-direction: row-reverse; } {% endif %} @media only screen and (max-width: 992px) { {% if section.settings.m_revrt %} .vid-with-text-box{ flex-direction: column-reverse; } {% endif %} .text-content { width: 100%; } .video-section { width: 100%; } .vid-with-text-box { padding: 0px 0px; } .text-content { width: 100%; padding: 20px 15px 20px; } .content h2 { font-size: 24px; line-height: 32px; padding-bottom: 10px; } }

{% schema %}
{
“name”: “video with text”,
“class”: “video_with_text”,
“settings”: [
{
“type”: “checkbox”,
“id”: “revrt”,
“label”: “Video left”
},
{
“type”: “checkbox”,
“id”: “m_revrt”,
“label”: “Video top on mobile”
},
{
“type”: “text”,
“id”: “heading”,
“label”: “Heading”,
“default”: “Video With Text”
},
{
“type”: “textarea”,
“id”: “content”,
“label”: “Content”
},
{
“type”: “url”,
“id”: “url”,
“label”: “Button URL”
},
{
“type”: “text”,
“id”: “btn_label”,
“label”: “Button URL”
},
{
“type”: “radio”,
“id”: “select”,
“label”: “Video type”,
“options”: [
{
“value”: “MP4”,
“label”: “MP4”
},
{
“value”: “iframe”,
“label”: “Youtube/Vimeo”
}
],
“default”: “MP4”
},
{
“type”: “url”,
“id”: “vid”,
“label”: “MP4 video URL”
},
{
“type”: “image_picker”,
“id”: “poster”,
“label”: “Poster on MP4 video”
},
{
“type”: “checkbox”,
“id”: “check”,
“label”: “Video autoplay”
},
{
“type”: “url”,
“id”: “i_vid”,
“label”: “Youtube/Vimeo video URL”
},
{
“type”: “checkbox”,
“id”: “bg_clr”,
“label”: “background color”
},
{
“type”: “color”,
“id”: “body_text”,
“label”: “BG-color”,
“default”: “#cdcdcd”
}
],
“presets”: [
{
“name”: “video with text”
}
]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

  1. save.

  2. If you are using theme version 2.0 then add section from theme customization. Or else please paste this code {% include ‘video_with_text’ %} wherever you want this section.

this section is dynamic you can change video, image or text any time from the theme customization.

2 Likes