Video Background Section Wont Move

JebariM
New Member
1 0 1

Hey, I am having trouble with my video background section. I added the Section in my theme and it will move on the panel, however, it will not move on the page nor will it shrink for responsive design. It is currently sitting in the panel at the bottom of the page. But in the preview section, it is covering the top of my page.

Screen Shot 2021-01-14 at 3.42.23 PM.pngScreen Shot 2021-01-14 at 3.41.25 PM.png

Below is the code I wrote for it. 

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

{% if section.settings.height != 'use_image' %}
<style>
  @media only screen and (max-width: 480px){
    [data-section-id="{{ section.id }}"] video{
      width: auto !important;
      height: 100% !important;
    }
  }
</style>
{% endif %}

<div class="section--image fade-in-child preventOverflow {{ section.settings.height }} {{ section.settings.color }}" data-section-id="{{ section.id }}" data-section-type="hero" >

  <video autoplay loop muted playsinline width="100%" {% if section.settings.height != 'use_image' %} style="position: absolute;  top: 0;  left: 0;  width: 100%;  height: auto"{% endif %}>
    <source src="{{ section.settings.videofile }}" type="video/mp4" id="{{ section.id }}">
  </video> 
  
  {% if section.settings.link_text == '' and section.settings.link  %}
    <a href="{{ section.settings.link }}">
  {% endif %}

  <div class="flex-absolute {{ section.settings.text_align }}">
    <div class="wrapper preventOverflowContent">
      {% unless section.settings.title == '' %}
        <h1 class="title--overlay h2">{{ section.settings.title | escape }}</h1>
      {% endunless %}
      {% unless section.settings.description == '' %}
        <p class="content--overlay h5--body">{{ section.settings.description }}</p>
      {% endunless %}
      {% unless section.settings.link_text == '' %}
        <a class="{{ section.settings.button_style }} cta--overlay btn--large uppercase" href="{{ section.settings.link }}">{{ section.settings.link_text | escape }}</a>
      {% endunless %}
    </div>
  </div>
      
  {% if section.settings.link_text == '' and section.settings.link %}
    </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>


{% schema %}
{
  "name": "Video MP4 mobile",
  "settings": [
    {
      "type": "text",
      "id": "videofile",
      "label": "Video URL",
      "default": "https://cdn.shopify.com/s/files/1/2018/8867/files/ice.mp4"
    },
    {
      "type": "select",
      "id": "height",
      "label": "Section height",
      "default": "use_screen_two_thirds",
      "options": [
        { "value": "use_screen_full", "label": "Full screen height"},
        { "value": "use_screen_three_quarters", "label": "Three quarters of screen height"},
        { "value": "use_screen_two_thirds", "label": "Two thirds of screen height"},
        { "value": "use_screen_one_half", "label": "One half of screen height"},
        { "value": "use_screen_one_third", "label": "One third of screen height"},
        { "value": "use_pixels_800", "label": "800px" },
        { "value": "use_pixels_650", "label": "650px" },
        { "value": "use_pixels_500", "label": "500px" },
        { "value": "use_image", "label": "Image height"}
      ]
    },
    {
      "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": "align--middle-center",
      "options": [
        { "value": "align--top-left", "label": "Top left"},
        { "value": "align--top-center", "label": "Top center"},
        { "value": "align--top-right", "label": "Top right"},
        { "value": "align--middle-left", "label": "Middle left"},
        { "value": "align--middle-center", "label": "Absolute center"},
        { "value": "align--middle-right", "label": "Middle right"},
        { "value": "align--bottom-left", "label": "Bottom left"},
        { "value": "align--bottom-center", "label": "Bottom center"},
        { "value": "align--bottom-right", "label": "Bottom 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": "palette--contrast--dark",
      "options": [
        { "value": "palette--contrast--dark", "label": "White"},
        { "value": "palette--primary", "label": "Primary accent"},
        { "value": "palette--secondary", "label": "Secondary accent"},
        { "value": " ", "label": "Text color"},
        { "value": "palette--contrast", "label": "Black"},
        { "value": "palette--primary--dark", "label": "Primary dark accent"},
        { "value": "palette--secondary--dark", "label": "Secondary dark accent"},
        { "value": "palette--dark", "label": "Inverted text color"}
      ]
    },
    {
      "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",
      "options": [
        { "value": "btn", "label": "Solid button"},
        { "value": "btn--soft", "label": "Soft button"},
        { "value": "btn--outline", "label": "Outlined button"}
      ]
    }
  ],
  "presets": [
    {
      "name": "Video with text overlay",
      "category": "Video MP4 mobile"
}
  ]
}
{% endschema %}


{% stylesheet %}
{% endstylesheet %}

 

KetanKumar
Shopify Partner
14323 1665 5151

@JebariM 

Welcome to the Shopify community!
and Thanks for your question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes