Looping Banner Video With Text Overlay (creating usable section)

ack
New Member
6 0 0

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.

<!-- /sections/index-mp4.liquid -->

<div class="homepage-image preventOverflow {{ section.settings.height }} {{ section.settings.color }}" data-section-id="{{ section.id }}" data-section-type="banner" {% if section.settings.parallax %}data-img-src="{{ background_image }}"{% endif %}>
	
    <video autoplay loop muted playsinline width="100%">
  <source src="{{ section.settings.videofile }}" type="video/mp4" id="{{ section.id }}">
</video>

  
  {% if section.settings.link_text == '' and section.settings.link and section.settings.button_image == nil %}
    <a href="{{ section.settings.link }}">
  {% endif %}


    <div id="index-mp4-video">
  
</div>

        <div class="content--centered mp4">
      <div class="{{ section.settings.text_align }} preventOverflowContent">
      {% if section.settings.button_image %}
        <a href="{{ section.settings.link }}">
          <img src="{{ section.settings.button_image | img_url: '1000x' }}" alt="{{ section.settings.button_image.alt | default: section.settings.link_text }}" class="image--flex" />
        </a>
      {% else %}
        {% unless section.settings.title == '' %}<h1 class="title--flex">{{ section.settings.title | escape }}</h1>{% endunless %}
        {% unless section.settings.description == '' %}<p class="content--flex h4--body">{{ section.settings.description }}</p>{% endunless %}
        {% unless section.settings.link_text == '' %}<a class="{{ section.settings.button_style }}" href="{{ section.settings.link }}">{{ section.settings.link_text | escape }}</a>{% endunless %}
      {% endif %}
    </div>
  </div>

  {% if section.settings.link_text == '' and section.settings.link and section.settings.button_image == nil %}
    </a>
  {% endif %}
  {% if section.settings.height == 'use_screen_full' %}
  <div class="scroll_icon_wrap">
    <a href="#scroll-{{ section.id }}" class="scroll_link bloop">
      <span class="scroll_icon">{% include 'svg-down' %}</span>
    </a>
  </div>
  <div class="scroll__link" id="scroll-{{ section.id }}"></div>
  {% endif %}
  </div>




<script type="text/javascript">
  document.getElementById('{{ section.id }}').play();
$(function () {
  if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $("video").prop('muted', false);
  }
});
</script>


{% 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 %}

 

 

0 Likes
ack
New Member
6 0 0

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?

0 Likes
ack
New Member
6 0 0

Nevermind, fixed it

0 Likes