Hello guys!
I have a problem with setting a video background on my home page on mobile devices (both IOS and Android, etc.) I have been trying to fix it for about 6 hours… and still nothing. Here is the thing: I made video-backgroud.liquid section using this code:
{%- if section.blocks.size > 0 -%}> {%- for block in section.blocks -%}> {%- assign img_url = block.settings.image | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ -%}> > {% if block.type == ‘video’ %}>
{%- if block.settings.video_link != blank -%}>
{% endif %}> >
{% if block.settings.title != blank %}> # > {{ block.settings.title | escape }}> > {% endif %}> > {%- style -%}> .videoBackground .imageBoxInfoDescription p {> color: {{ block.settings.color_text }}!important;> }> {%- endstyle -%}> > {% if block.settings.text != blank %}> > {{ block.settings.text }}>
{% endif %}> > {% if block.settings.button_link != blank and block.settings.button_label != blank %}> > {{ block.settings.button_label | escape }}> > {% endif %}>{% else %}> > >
{% if block.settings.title != blank %}> # > {{ block.settings.title | escape }}> > {% endif %}> > {%- style -%}> .videoBackground .imageBoxInfoDescription p {> color: {{ block.settings.color_text }}!important;> }> {%- endstyle -%}> > {% if block.settings.text != blank %}> > {{ block.settings.text }}>
{% endif %}> > {% if block.settings.button_link != blank and block.settings.button_label != blank %}> > {{ block.settings.button_label | escape }}> > {% endif %}>{% endif %}> {%- endfor -%}> > {% else %}> > This section doesn’t currently include any content. Add content to this section using the sidebar.>
{%- endif -%}> > > > {% schema %}> {> “name”: {> “en”: “Video Background”> },> “class”: “videoBackground”,> “max_blocks”: 1,> “blocks”: [> {> “type”: “video”,> “name”: “Video”,> “settings”: [> {> “type”: “url”,> “id”: “video_link”,> “label”: {> “en”: “Video link”> }> },> {> “type”: “image_picker”,> “id”: “video_image”,> “label”: {> “en”: “Cover image”> }> },> {> “type”: “range”,> “id”: “overlay_opacity”,> “label”: {> “en”: “Overlay opacity”> },> “min”: 0,> “max”: 99,> “step”: 1,> “unit”: {> “en”: “%”> },> “default”: 0> },> {> “type”: “header”,> “content”: {> “en”: “Text”> }> },> {> “type”: “text”,> “id”: “title”,> “label”: {> “en”: “Heading”> },> “default”: “Video slide”> },> {> “type”: “richtext”,> “id”: “text”,> “label”: {> “en”: “Description”> },> “default”: {> “en”: "
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
"> }> },> {> “type”: “color”,> “id”: “color_text”,> “label”: {> “en”: “Text color”> },> “default”: “#ffffff”> },> {> “type”: “text”,> “id”: “button_label”,> “label”: {> “en”: “Button label”> }> },> {> “type”: “url”,> “id”: “button_link”,> “label”: {> “en”: “Button link”> }> },> {> “type”: “color”,> “id”: “color_btn_bg”,> “label”: {> “en”: “Background button color”> },> “default”: “#ffffff”> },> {> “type”: “color”,> “id”: “color_btn_text”,> “label”: {> “en”: “Button text color”> },> “default”: “#ffffff”> }> ]> },> {> “type”: “image”,> “name”: “Image”,> “settings”: [> {> “type”: “color”,> “id”: “color_bg”,> “label”: {> “en”: “Background color (optional)”> },> “default”: “#16165b”> },> {> “type”: “image_picker”,> “id”: “image_bg”,> “label”: {> “en”: “or use an image (required)”> }> },> {> “type”: “range”,> “id”: “overlay_opacity”,> “label”: {> “en”: “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”: {> “en”: “Heading”> }> },> {> “type”: “richtext”,> “id”: “text”,> “label”: {> “en”: “Description”> },> “default”: {> “en”: "
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
"> }> },> {> “type”: “color”,> “id”: “color_text”,> “label”: {> “en”: “Text color”> },> “default”: “#ffffff”> },> {> “type”: “text”,> “id”: “button_label”,> “label”: {> “en”: “Button label”> }> },> {> “type”: “url”,> “id”: “button_link”,> “label”: {> “en”: “Button link”> }> },> {> “type”: “color”,> “id”: “color_btn_bg”,> “label”: {> “en”: “Background button color”> },> “default”: “#ffffff”> },> {> “type”: “color”,> “id”: “color_btn_text”,> “label”: {> “en”: “Button text color”> },> “default”: “#ffffff”> }> ]> }> ],> “presets”: [> {> “name”: {> “en”: “Video Background”> },> “category”: {> “en”: “Main”> },> “blocks”: [> {> “type”: “video”> }> ]> }> ]> }> {% endschema %}
Now, the problem is that I the ‘SHOP NOW’ button is just good when you are on desktop, but when you are on mobile, there is some black background around the ‘SHOP NOW’ button… I have also input this code in (base.css) to make mobile devices more competable with video background.
@media screen and (max-width: 767px) {> .videoBackground .videoBox {> padding: 100px 20px 80px !important;> }> .videoBackground .fullscreen-video-wrap {> position: absolute !important;> z-index: 1 !important;> }> .videoBackground .videoBoxInfo {> padding: 10px !important;> }> }
Here is my store to take a look for yourself (see on mobile device): smartaipets.store password: SOSHELPME!
And here is how it appears:
