Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Video is not Visible

Solved

Video is not Visible

masooma12
Shopify Partner
15 0 0

hey guys i have added the background video section but why the video is not visible

masooma12_0-1710935449436.png

masooma12_1-1710935484204.png

below is my code

{%- if section.blocks.size > 0 -%}
 
  {%- for block in section.blocks -%}
   
    {% assign image_url = block.settings.image | image_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
   
   
  {% if block.type == 'video' %}
   
  <div class="videoBox" style="{%- if block.settings.video_link == blank -%}background-image: url('{{ block.settings.video_image  | image_url: 'master' }}');{%- endif -%}">
   
   
   
  {%- if block.settings.video_link != blank -%}
   
  <div class="fullscreen-video-wrap">
   
  <video class="video-js" loop autoplay preload="none" muted playsinline
   
  poster="https:{{ block.settings.video_image | image_url: 'master' }}">
   
  <source src="{{ block.settings.video_link |  asset_url }}" type="video/mp4">
   
  </video>
   
  </div>
   
  {% endif %}
   
   
   
   
  <div class="videoBoxInfo">
   
  {% if block.settings.title != blank %}
   
  <h1 class="videoBoxInfoTitle" style="color: {{ block.settings.color_text }}">
   
  {{ block.settings.title | escape }}
   
  </h1>
   
  {% endif %}
   
   
   
  {%- style -%}
   
  .videoBackground .imageBoxInfoDescription p {
   
  color: {{ block.settings.color_text }}!important;
   
  }
   
  {%- endstyle -%}
   
   
   
  {% if block.settings.text != blank %}
   
  <div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
   
  {{ block.settings.text }}
   
  </div>
   
  {% endif %}
   
   
   
  {% if block.settings.button_link != blank and block.settings.button_label != blank %}
   
  <a href="{{ block.settings.button_link }}" class="videoBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
   
  {{ block.settings.button_label | escape }}
   
  </a>
   
  {% endif %}
   
  </div>
   
  </div>
   
  {% else %}
   
  <div class="imageBox" style="background-color: {{ block.settings.color_bg }}; {%- if block.settings.image_bg != blank -%}background-image: url('{{ block.settings.image_bg | image_url: 'master' }}');{%- endif -%}">
   
   
   
   
   
   
  <div class="imageBoxInfo">
   
  {% if block.settings.title != blank %}
   
  <h1 class="imageBoxInfoTitle" style="color: {{ block.settings.color_text }}">
   
  {{ block.settings.title | escape }}
   
  </h1>
   
  {% endif %}
   
   
   
  {%- style -%}
   
  .videoBackground .imageBoxInfoDescription p {
   
  color: {{ block.settings.color_text }}!important;
   
  }
   
  {%- endstyle -%}
   
   
   
  {% if block.settings.text != blank %}
   
  <div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
   
  {{ block.settings.text }}
   
  </div>
   
  {% endif %}
   
   
   
  {% if block.settings.button_link != blank and block.settings.button_label != blank %}
   
  <a href="{{ block.settings.button_link }}" class="imageBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
   
  {{ block.settings.button_label | escape }}
   
  </a>
   
  {% endif %}
   
  </div>
   
  </div>
   
  {% endif %}
   
  {%- endfor -%}
   
   
   
  {% else %}
   
  <div class="placeholderNoblocks">
   
  This section doesn’t currently include any content. Add content to this section using the sidebar.
   
      </div>
   
  {%- endif -%}
   
   
   
  <style>
   
  .main-content .videoBackground {
   
  margin-top: -55px;
   
  }
   
  .videoBackground {
   
  position: relative;
   
  }
   
  .videoBackground .fullscreen-video-wrap {
   
  position: absolute;
   
  top: 0;
   
  left: 0;
   
  min-width: 100%;
   
  width: 100%;
   
  height: 100%;
   
  overflow: hidden;
   
  }
   
  .videoBackground .fullscreen-video-wrap .video-js {
   
  position: absolute;
   
  top: 0;
   
  left: 0;
   
  min-height: 100%;
   
  min-width: 100%;
   
  width: 100%;
   
  height: 100%;
   
  object-fit: cover;
   
  }
   
  .videoBackground .fullscreen-video-wrap video {
   
  min-height: 100%;
   
  min-width: 100%;
   
  object-fit: cover;
   
  }
   
  .videoBackground .videoBox {
   
  display: flex;
   
  align-items: center;
   
  justify-content: flex-end;
   
  flex-direction: column;
   
  padding: 100px 20px 80px;
   
  background-size: cover;
   
  background-position: center;
   
  background-repeat: no-repeat;
   
  min-height: 500px;
   
  max-height: 800px;
   
          height: calc(100vh - 165px);
   
  position: relative;
   
  }
   
  .videoBackground .imageBox {
   
  display: flex;
   
  align-items: center;
   
  justify-content: flex-end;
   
  flex-direction: column;
   
  padding: 100px 20px 80px;
   
  background-size: cover;
   
  background-position: center;
   
  background-repeat: no-repeat;
   
  position: relative;
   
  min-height: calc(100vh - 165px);
   
  height: auto;
   
  }
   
  .videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo {
   
  z-index: 2;
    
  margin: auto;
   
  text-align: center;
   
  }
   
  .videoBackground .overlay {
   
  content: "";
   
  position: absolute;
   
  top: 0;
   
  right: 0;
   
  bottom: 0;
   
  left: 0;
   
  background: #000;
   
  z-index: 1;
   
  }
   
  .videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn {
   
  -moz-user-select: none;
   
  -ms-user-select: none;
   
  -webkit-user-select: none;
   
  user-select: none;
   
  -webkit-appearance: none;
   
  -moz-appearance: none;
   
  appearance: none;
   
  display: inline-block;
   
  width: auto;
   
  text-decoration: none;
   
  text-align: center;
   
  vertical-align: middle;
   
  cursor: pointer;
   
  border: 1px solid transparent;
   
  border-radius: 2px;
   
  padding: 10px 30px;
   
  font-style: normal;
   
  font-weight: normal;
   
  letter-spacing: 0.06em;
   
  white-space: normal;
   
  font-size: 16px;
   
  margin-top: 20px;
   
  }
   
  .videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {
   
  color: #FFF;
    
  font-size: 65px;
   
  line-height: 40px;
   
  }
   
  .videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {
   
  max-width: 500px;
   
  margin: 0 auto;
   
  }
   
  .videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {
    
  font-size: 17px;
   
  line-height: 28px;
   
  }
   
  .videoBackground .placeholderNoblocks {
   
  text-align: center;
   
  max-width: 500px;
   
  margin: 0 auto;
   
  }
   
      @media screen and (max-width: 767px) {
   
  .main-content .videoBackground {
   
  margin-top: -35px;
   
  }
   
  .videoBackground .fullscreen-video-wrap {
   
  z-index: 3;
   
  }
   
  .videoBackground .videoBox {
   
  min-height: 300px;
   
  height: 100%;
   
  position: relative;
   
  padding: 0;
   
  }
   
  .videoBackground .fullscreen-video-wrap {
   
  position: relative;
   
  min-height: 300px;
   
  z-index: -2;
   
  }
   
  .videoBackground .videoBoxInfo {
   
  padding: 2px 20px;
   
  width: 100%;
   
  }
   
  .videoBoxInfoTitle, .videoBackground .videoBoxInfoBtn {
  display: none;
   
  }
   
      }
   
  </style>
   
   
  {% schema %}
 {
  "name":  "Video Background",
  "class": "videoBackground",
  "max_blocks": 1,
  "blocks": [
    {
      "type": "video",
      "name": "Video",
      "settings": [
        {
          "type": "url",
          "id": "video_link",
          "label": "Video link"
          
        },
        {
          "type": "image_picker",
          "id": "video_image",
          "label": "Cover image"
          
        },
        {
          "type": "header",
          "content": {
            "en": "Text"
          }
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Video slide"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Description",
          "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
          
        },
        {
          "type": "color",
          "id": "color_text",
          "label":  "Text color",
          
          "default": "#ffffff"
        },
        {
          "type": "text",
          "id": "button_label",
          "label":"Button label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label":"Button link"
        },
        {
          "type": "color",
          "id": "color_btn_bg",
          "label":"Background button color",
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "color_btn_text",
          "label": "Button text color",
          "default": "#ffffff"
        }
      ]
    },
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "color",
          "id": "color_bg",
          "label": "Background color (optional)",
          "default": "#16165b"
        },
        {
          "type": "image_picker",
          "id": "image_bg",
          "label":"or use an image (required)"
        },
        {
          "type": "range",
          "id": "overlay_opacity",
          "label": "Overlay opacity",
          "min": 0,
          "max": 99,
          "step": 1,
          "unit": {
            "en": "%"
          },
          "default": 0
        },
        {
          "type": "header",
          "content": {
            "en": "Text"
          }
        },
        {
          "type": "text",
          "id": "title",
          "default": "Image slide",
          "label":"Heading"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Description",
          "default":  "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
          
        },
        {
          "type": "color",
          "id": "color_text",
          "label": "Text color",
          "default": "#ffffff"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label":"Button link"
        },
        {
          "type": "color",
          "id": "color_btn_bg",
          "label":  "Background button color",
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "color_btn_text",
          "label":"Button text color",
          "default": "#ffffff"
        }
      ]
    }
  ],
  "presets": [
    {
      "name":  "Video Background",
      "category": {
        "en": "Main"
      },
      "blocks": [
        {
          "type": "video"
        }
      ]
    }
  ]
}

  {% endschema %}

 

the code is from this video https://www.youtube.com/watch?v=-Zy-gHGQDtU 

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2139 616 511

This is an accepted solution.

Just try this one @masooma12,

{%- if section.blocks.size > 0 -%}
 
  {%- for block in section.blocks -%}
   
    {% assign image_url = block.settings.image | image_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
   
   
  {% if block.type == 'video' %}
   
  <div class="videoBox" style="{%- if block.settings.video_link == blank -%}background-image: url('{{ block.settings.video_image  | image_url: 'master' }}');{%- endif -%}">
   
   
   
  {%- if block.settings.video_link != blank -%}
   
  <div class="fullscreen-video-wrap">
   
  <video class="video-js" loop autoplay preload="none" muted playsinline
   
  poster="https:{{ block.settings.video_image | image_url: 'master' }}">
   
  <source src="{{ block.settings.video_link }}" type="video/mp4">
   
  </video>
   
  </div>
   
  {% endif %}
   
   
   
   
  <div class="videoBoxInfo">
   
  {% if block.settings.title != blank %}
   
  <h1 class="videoBoxInfoTitle" style="color: {{ block.settings.color_text }}">
   
  {{ block.settings.title | escape }}
   
  </h1>
   
  {% endif %}
   
   
   
  {%- style -%}
   
  .videoBackground .imageBoxInfoDescription p {
   
  color: {{ block.settings.color_text }}!important;
   
  }
   
  {%- endstyle -%}
   
   
   
  {% if block.settings.text != blank %}
   
  <div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
   
  {{ block.settings.text }}
   
  </div>
   
  {% endif %}
   
   
   
  {% if block.settings.button_link != blank and block.settings.button_label != blank %}
   
  <a href="{{ block.settings.button_link }}" class="videoBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
   
  {{ block.settings.button_label | escape }}
   
  </a>
   
  {% endif %}
   
  </div>
   
  </div>
   
  {% else %}
   
  <div class="imageBox" style="background-color: {{ block.settings.color_bg }}; {%- if block.settings.image_bg != blank -%}background-image: url('{{ block.settings.image_bg | image_url: 'master' }}');{%- endif -%}">
   
   
   
   
   
   
  <div class="imageBoxInfo">
   
  {% if block.settings.title != blank %}
   
  <h1 class="imageBoxInfoTitle" style="color: {{ block.settings.color_text }}">
   
  {{ block.settings.title | escape }}
   
  </h1>
   
  {% endif %}
   
   
   
  {%- style -%}
   
  .videoBackground .imageBoxInfoDescription p {
   
  color: {{ block.settings.color_text }}!important;
   
  }
   
  {%- endstyle -%}
   
   
   
  {% if block.settings.text != blank %}
   
  <div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
   
  {{ block.settings.text }}
   
  </div>
   
  {% endif %}
   
   
   
  {% if block.settings.button_link != blank and block.settings.button_label != blank %}
   
  <a href="{{ block.settings.button_link }}" class="imageBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
   
  {{ block.settings.button_label | escape }}
   
  </a>
   
  {% endif %}
   
  </div>
   
  </div>
   
  {% endif %}
   
  {%- endfor -%}
   
   
   
  {% else %}
   
  <div class="placeholderNoblocks">
   
  This section doesn’t currently include any content. Add content to this section using the sidebar.
   
      </div>
   
  {%- endif -%}
   
   
   
  <style>
   
  .main-content .videoBackground {
   
  margin-top: -55px;
   
  }
   
  .videoBackground {
   
  position: relative;
   
  }
   
  .videoBackground .fullscreen-video-wrap {
   
  position: absolute;
   
  top: 0;
   
  left: 0;
   
  min-width: 100%;
   
  width: 100%;
   
  height: 100%;
   
  overflow: hidden;
   
  }
   
  .videoBackground .fullscreen-video-wrap .video-js {
   
  position: absolute;
   
  top: 0;
   
  left: 0;
   
  min-height: 100%;
   
  min-width: 100%;
   
  width: 100%;
   
  height: 100%;
   
  object-fit: cover;
   
  }
   
  .videoBackground .fullscreen-video-wrap video {
   
  min-height: 100%;
   
  min-width: 100%;
   
  object-fit: cover;
   
  }
   
  .videoBackground .videoBox {
   
  display: flex;
   
  align-items: center;
   
  justify-content: flex-end;
   
  flex-direction: column;
   
  padding: 100px 20px 80px;
   
  background-size: cover;
   
  background-position: center;
   
  background-repeat: no-repeat;
   
  min-height: 500px;
   
  max-height: 800px;
   
          height: calc(100vh - 165px);
   
  position: relative;
   
  }
   
  .videoBackground .imageBox {
   
  display: flex;
   
  align-items: center;
   
  justify-content: flex-end;
   
  flex-direction: column;
   
  padding: 100px 20px 80px;
   
  background-size: cover;
   
  background-position: center;
   
  background-repeat: no-repeat;
   
  position: relative;
   
  min-height: calc(100vh - 165px);
   
  height: auto;
   
  }
   
  .videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo {
   
  z-index: 2;
    
  margin: auto;
   
  text-align: center;
   
  }
   
  .videoBackground .overlay {
   
  content: "";
   
  position: absolute;
   
  top: 0;
   
  right: 0;
   
  bottom: 0;
   
  left: 0;
   
  background: #000;
   
  z-index: 1;
   
  }
   
  .videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn {
   
  -moz-user-select: none;
   
  -ms-user-select: none;
   
  -webkit-user-select: none;
   
  user-select: none;
   
  -webkit-appearance: none;
   
  -moz-appearance: none;
   
  appearance: none;
   
  display: inline-block;
   
  width: auto;
   
  text-decoration: none;
   
  text-align: center;
   
  vertical-align: middle;
   
  cursor: pointer;
   
  border: 1px solid transparent;
   
  border-radius: 2px;
   
  padding: 10px 30px;
   
  font-style: normal;
   
  font-weight: normal;
   
  letter-spacing: 0.06em;
   
  white-space: normal;
   
  font-size: 16px;
   
  margin-top: 20px;
   
  }
   
  .videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {
   
  color: #FFF;
    
  font-size: 65px;
   
  line-height: 40px;
   
  }
   
  .videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {
   
  max-width: 500px;
   
  margin: 0 auto;
   
  }
   
  .videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {
    
  font-size: 17px;
   
  line-height: 28px;
   
  }
   
  .videoBackground .placeholderNoblocks {
   
  text-align: center;
   
  max-width: 500px;
   
  margin: 0 auto;
   
  }
   
      @media screen and (max-width: 767px) {
   
  .main-content .videoBackground {
   
  margin-top: -35px;
   
  }
   
  .videoBackground .fullscreen-video-wrap {
   
  z-index: 3;
   
  }
   
  .videoBackground .videoBox {
   
  min-height: 300px;
   
  height: 100%;
   
  position: relative;
   
  padding: 0;
   
  }
   
  .videoBackground .fullscreen-video-wrap {
   
  position: relative;
   
  min-height: 300px;
   
  z-index: -2;
   
  }
   
  .videoBackground .videoBoxInfo {
   
  padding: 2px 20px;
   
  width: 100%;
   
  }
   
  .videoBoxInfoTitle, .videoBackground .videoBoxInfoBtn {
  display: none;
   
  }
   
      }
   
  </style>
   
   
  {% schema %}
 {
  "name":  "Video Background",
  "class": "videoBackground",
  "max_blocks": 1,
  "blocks": [
    {
      "type": "video",
      "name": "Video",
      "settings": [
        {
          "type": "text",
          "id": "video_link",
          "label": "Video link"
          
        },
        {
          "type": "image_picker",
          "id": "video_image",
          "label": "Cover image"
          
        },
        {
          "type": "header",
          "content": {
            "en": "Text"
          }
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Video slide"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Description",
          "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
          
        },
        {
          "type": "color",
          "id": "color_text",
          "label":  "Text color",
          
          "default": "#ffffff"
        },
        {
          "type": "text",
          "id": "button_label",
          "label":"Button label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label":"Button link"
        },
        {
          "type": "color",
          "id": "color_btn_bg",
          "label":"Background button color",
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "color_btn_text",
          "label": "Button text color",
          "default": "#ffffff"
        }
      ]
    },
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "color",
          "id": "color_bg",
          "label": "Background color (optional)",
          "default": "#16165b"
        },
        {
          "type": "image_picker",
          "id": "image_bg",
          "label":"or use an image (required)"
        },
        {
          "type": "range",
          "id": "overlay_opacity",
          "label": "Overlay opacity",
          "min": 0,
          "max": 99,
          "step": 1,
          "unit": {
            "en": "%"
          },
          "default": 0
        },
        {
          "type": "header",
          "content": {
            "en": "Text"
          }
        },
        {
          "type": "text",
          "id": "title",
          "default": "Image slide",
          "label":"Heading"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Description",
          "default":  "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
          
        },
        {
          "type": "color",
          "id": "color_text",
          "label": "Text color",
          "default": "#ffffff"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label":"Button link"
        },
        {
          "type": "color",
          "id": "color_btn_bg",
          "label":  "Background button color",
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "color_btn_text",
          "label":"Button text color",
          "default": "#ffffff"
        }
      ]
    }
  ],
  "presets": [
    {
      "name":  "Video Background",
      "category": {
        "en": "Main"
      },
      "blocks": [
        {
          "type": "video"
        }
      ]
    }
  ]
}

  {% endschema %}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 2 (2)

ThePrimeWeb
Shopify Partner
2139 616 511

This is an accepted solution.

Just try this one @masooma12,

{%- if section.blocks.size > 0 -%}
 
  {%- for block in section.blocks -%}
   
    {% assign image_url = block.settings.image | image_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
   
   
  {% if block.type == 'video' %}
   
  <div class="videoBox" style="{%- if block.settings.video_link == blank -%}background-image: url('{{ block.settings.video_image  | image_url: 'master' }}');{%- endif -%}">
   
   
   
  {%- if block.settings.video_link != blank -%}
   
  <div class="fullscreen-video-wrap">
   
  <video class="video-js" loop autoplay preload="none" muted playsinline
   
  poster="https:{{ block.settings.video_image | image_url: 'master' }}">
   
  <source src="{{ block.settings.video_link }}" type="video/mp4">
   
  </video>
   
  </div>
   
  {% endif %}
   
   
   
   
  <div class="videoBoxInfo">
   
  {% if block.settings.title != blank %}
   
  <h1 class="videoBoxInfoTitle" style="color: {{ block.settings.color_text }}">
   
  {{ block.settings.title | escape }}
   
  </h1>
   
  {% endif %}
   
   
   
  {%- style -%}
   
  .videoBackground .imageBoxInfoDescription p {
   
  color: {{ block.settings.color_text }}!important;
   
  }
   
  {%- endstyle -%}
   
   
   
  {% if block.settings.text != blank %}
   
  <div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
   
  {{ block.settings.text }}
   
  </div>
   
  {% endif %}
   
   
   
  {% if block.settings.button_link != blank and block.settings.button_label != blank %}
   
  <a href="{{ block.settings.button_link }}" class="videoBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
   
  {{ block.settings.button_label | escape }}
   
  </a>
   
  {% endif %}
   
  </div>
   
  </div>
   
  {% else %}
   
  <div class="imageBox" style="background-color: {{ block.settings.color_bg }}; {%- if block.settings.image_bg != blank -%}background-image: url('{{ block.settings.image_bg | image_url: 'master' }}');{%- endif -%}">
   
   
   
   
   
   
  <div class="imageBoxInfo">
   
  {% if block.settings.title != blank %}
   
  <h1 class="imageBoxInfoTitle" style="color: {{ block.settings.color_text }}">
   
  {{ block.settings.title | escape }}
   
  </h1>
   
  {% endif %}
   
   
   
  {%- style -%}
   
  .videoBackground .imageBoxInfoDescription p {
   
  color: {{ block.settings.color_text }}!important;
   
  }
   
  {%- endstyle -%}
   
   
   
  {% if block.settings.text != blank %}
   
  <div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
   
  {{ block.settings.text }}
   
  </div>
   
  {% endif %}
   
   
   
  {% if block.settings.button_link != blank and block.settings.button_label != blank %}
   
  <a href="{{ block.settings.button_link }}" class="imageBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
   
  {{ block.settings.button_label | escape }}
   
  </a>
   
  {% endif %}
   
  </div>
   
  </div>
   
  {% endif %}
   
  {%- endfor -%}
   
   
   
  {% else %}
   
  <div class="placeholderNoblocks">
   
  This section doesn’t currently include any content. Add content to this section using the sidebar.
   
      </div>
   
  {%- endif -%}
   
   
   
  <style>
   
  .main-content .videoBackground {
   
  margin-top: -55px;
   
  }
   
  .videoBackground {
   
  position: relative;
   
  }
   
  .videoBackground .fullscreen-video-wrap {
   
  position: absolute;
   
  top: 0;
   
  left: 0;
   
  min-width: 100%;
   
  width: 100%;
   
  height: 100%;
   
  overflow: hidden;
   
  }
   
  .videoBackground .fullscreen-video-wrap .video-js {
   
  position: absolute;
   
  top: 0;
   
  left: 0;
   
  min-height: 100%;
   
  min-width: 100%;
   
  width: 100%;
   
  height: 100%;
   
  object-fit: cover;
   
  }
   
  .videoBackground .fullscreen-video-wrap video {
   
  min-height: 100%;
   
  min-width: 100%;
   
  object-fit: cover;
   
  }
   
  .videoBackground .videoBox {
   
  display: flex;
   
  align-items: center;
   
  justify-content: flex-end;
   
  flex-direction: column;
   
  padding: 100px 20px 80px;
   
  background-size: cover;
   
  background-position: center;
   
  background-repeat: no-repeat;
   
  min-height: 500px;
   
  max-height: 800px;
   
          height: calc(100vh - 165px);
   
  position: relative;
   
  }
   
  .videoBackground .imageBox {
   
  display: flex;
   
  align-items: center;
   
  justify-content: flex-end;
   
  flex-direction: column;
   
  padding: 100px 20px 80px;
   
  background-size: cover;
   
  background-position: center;
   
  background-repeat: no-repeat;
   
  position: relative;
   
  min-height: calc(100vh - 165px);
   
  height: auto;
   
  }
   
  .videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo {
   
  z-index: 2;
    
  margin: auto;
   
  text-align: center;
   
  }
   
  .videoBackground .overlay {
   
  content: "";
   
  position: absolute;
   
  top: 0;
   
  right: 0;
   
  bottom: 0;
   
  left: 0;
   
  background: #000;
   
  z-index: 1;
   
  }
   
  .videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn {
   
  -moz-user-select: none;
   
  -ms-user-select: none;
   
  -webkit-user-select: none;
   
  user-select: none;
   
  -webkit-appearance: none;
   
  -moz-appearance: none;
   
  appearance: none;
   
  display: inline-block;
   
  width: auto;
   
  text-decoration: none;
   
  text-align: center;
   
  vertical-align: middle;
   
  cursor: pointer;
   
  border: 1px solid transparent;
   
  border-radius: 2px;
   
  padding: 10px 30px;
   
  font-style: normal;
   
  font-weight: normal;
   
  letter-spacing: 0.06em;
   
  white-space: normal;
   
  font-size: 16px;
   
  margin-top: 20px;
   
  }
   
  .videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {
   
  color: #FFF;
    
  font-size: 65px;
   
  line-height: 40px;
   
  }
   
  .videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {
   
  max-width: 500px;
   
  margin: 0 auto;
   
  }
   
  .videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {
    
  font-size: 17px;
   
  line-height: 28px;
   
  }
   
  .videoBackground .placeholderNoblocks {
   
  text-align: center;
   
  max-width: 500px;
   
  margin: 0 auto;
   
  }
   
      @media screen and (max-width: 767px) {
   
  .main-content .videoBackground {
   
  margin-top: -35px;
   
  }
   
  .videoBackground .fullscreen-video-wrap {
   
  z-index: 3;
   
  }
   
  .videoBackground .videoBox {
   
  min-height: 300px;
   
  height: 100%;
   
  position: relative;
   
  padding: 0;
   
  }
   
  .videoBackground .fullscreen-video-wrap {
   
  position: relative;
   
  min-height: 300px;
   
  z-index: -2;
   
  }
   
  .videoBackground .videoBoxInfo {
   
  padding: 2px 20px;
   
  width: 100%;
   
  }
   
  .videoBoxInfoTitle, .videoBackground .videoBoxInfoBtn {
  display: none;
   
  }
   
      }
   
  </style>
   
   
  {% schema %}
 {
  "name":  "Video Background",
  "class": "videoBackground",
  "max_blocks": 1,
  "blocks": [
    {
      "type": "video",
      "name": "Video",
      "settings": [
        {
          "type": "text",
          "id": "video_link",
          "label": "Video link"
          
        },
        {
          "type": "image_picker",
          "id": "video_image",
          "label": "Cover image"
          
        },
        {
          "type": "header",
          "content": {
            "en": "Text"
          }
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Video slide"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Description",
          "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
          
        },
        {
          "type": "color",
          "id": "color_text",
          "label":  "Text color",
          
          "default": "#ffffff"
        },
        {
          "type": "text",
          "id": "button_label",
          "label":"Button label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label":"Button link"
        },
        {
          "type": "color",
          "id": "color_btn_bg",
          "label":"Background button color",
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "color_btn_text",
          "label": "Button text color",
          "default": "#ffffff"
        }
      ]
    },
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "color",
          "id": "color_bg",
          "label": "Background color (optional)",
          "default": "#16165b"
        },
        {
          "type": "image_picker",
          "id": "image_bg",
          "label":"or use an image (required)"
        },
        {
          "type": "range",
          "id": "overlay_opacity",
          "label": "Overlay opacity",
          "min": 0,
          "max": 99,
          "step": 1,
          "unit": {
            "en": "%"
          },
          "default": 0
        },
        {
          "type": "header",
          "content": {
            "en": "Text"
          }
        },
        {
          "type": "text",
          "id": "title",
          "default": "Image slide",
          "label":"Heading"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Description",
          "default":  "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
          
        },
        {
          "type": "color",
          "id": "color_text",
          "label": "Text color",
          "default": "#ffffff"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label":"Button link"
        },
        {
          "type": "color",
          "id": "color_btn_bg",
          "label":  "Background button color",
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "color_btn_text",
          "label":"Button text color",
          "default": "#ffffff"
        }
      ]
    }
  ],
  "presets": [
    {
      "name":  "Video Background",
      "category": {
        "en": "Main"
      },
      "blocks": [
        {
          "type": "video"
        }
      ]
    }
  ]
}

  {% endschema %}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
masooma12
Shopify Partner
15 0 0

Thank You ! it Worked