Looping Banner Video With Text Overlay (creating usable section)

Technical Q&A
1

I want to make a looping banner video with a text overlay as an actual usable section in the theme editor (using narrative theme). I found an old post that got me 90% of the way there, (video plays and loops, seciton exists in the editor), but I think it may be referencing old css classes because the positioning of the text is below the video rather than on top. Could anyone help me out? I tried fooling around with some position relative, position absolute classes but couldn’t get it to work. The article I found also had no CSS in it – which is why I’m assuming it was trying to use existing classes. Below is the section file index-mp4.liquid.


	
    

  
  {% if section.settings.link_text == '' and section.settings.link and section.settings.button_image == nil %}
    
  {% endif %}

    

  

        

      

      {% if section.settings.button_image %}
        
          
        
      {% else %}
        {% unless section.settings.title == '' %}# {{ section.settings.title | escape }}{% endunless %}
        {% unless section.settings.description == '' %}

{{ section.settings.description }}

{% endunless %}
        {% unless section.settings.link_text == '' %}{{ section.settings.link_text | escape }}{% endunless %}
      {% endif %}
    

  

  {% if section.settings.link_text == '' and section.settings.link and section.settings.button_image == nil %}
    
  {% endif %}
  {% if section.settings.height == 'use_screen_full' %}
  
    
      {% include 'svg-down' %}
    
  

  

  {% endif %}
  

{% schema %}
{
  "name": "Video MP4",
  "settings": [
    {
      "type": "text",
      "id": "videofile",
      "label": "Video URL",
      "default": "https://cdn.shopify.com/s/files/1/2018/8867/files/ice.mp4"
    },
    {
      "type": "header",
      "content": "Text"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Headline",
      "default": "Video with text overlay"
    },
    {
      "type": "textarea",
      "id": "description",
      "label": "Description",
      "default": "This area is used to describe your store."
    },
    {
      "type": "select",
      "id": "text_align",
      "label": "Alignment",
      "default": "text-center",
      "options": [
        { "value": "text-left", "label": "Align Left"},
        { "value": "text-center", "label": "Align Center"},
        { "value": "text-right", "label": "Align Right"}
      ]
    },
    {
      "type":    "range",
      "id":      "overlay_opacity",
      "min":     0,
      "max":     100,
      "step":    5,
      "label":   "Image overlay opacity",
      "info":    "Increase contrast for legible text.",
      "default": 15
    },
    {
      "type": "select",
      "id": "color",
      "label": "Text color",
      "default": "homepage--white",
      "options": [
        { "value": "homepage--white", "label": "White"},
        { "value": "homepage--light", "label": "Light"},
        { "value": "homepage--splash", "label": "Accent"},
        { "value": "homepage--dark", "label": "Dark"}
      ]
    },
    {
      "type": "header",
      "content": "Button"
    },
    {
      "type": "text",
      "id": "link_text",
      "label": "Text",
      "default": "View products"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    },
    {
      "type": "select",
      "id": "button_style",
      "label": "Button style",
      "default": "btn btn--large btn--clear btn--square uppercase",
      "options": [
        { "value": "btn btn--large btn--splash uppercase", "label": "Round"},
        { "value": "btn btn--large btn--splash btn--square uppercase", "label": "Square"},
        { "value": "btn btn--large btn--clear uppercase", "label": "Transparent round"},
        { "value": "btn btn--large btn--clear btn--square uppercase", "label": "Transparent square"},
        { "value": "btn btn--large btn--outline btn--square uppercase", "label": "Outlined square"}
      ]
    },
    {
      "type": "header",
      "content": "Overlay image (optional)"
    },
    {
      "type": "image_picker",
      "id": "button_image",
      "label": "Replaces all text",
      "info": "1000 x 1000px .png max"
    }
  ],
  "presets": [
    {
      "name": "Video with text overlay",
      "category": "Video"
}
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}
2

Update: I realized that this is an example from a different theme which is why none of the classes exist – so I guess my question is just what classes do I need to create to make this work?

3

Nevermind, fixed it