FROM CACHE - en_header
Promotion image

Why is my video background not working on mobile devices?

Why is my video background not working on mobile devices?

ChodaBRO
Tourist
8 0 0
‎03-23-2024 11:32 PM

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' %}
<div class="videoBox" style="{%- if block.settings.video_link == blank -%}background-image: url('{{ block.settings.video_image  | img_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 | img_url: 'master' }}">
<source src="{{ block.settings.video_link }}" type="video/mp4">
</video>
</div>
{% endif %}
 
<div class="overlay" style="opacity: 0.{{ block.settings.overlay_opacity }}"></div>
<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 | img_url: 'master' }}');{%- endif -%}">
 
<div class="overlay" style="opacity: 0.{{ block.settings.overlay_opacity }}"></div>
 
<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>
body.template-index .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;
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: 8px 15px;
font-style: normal;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: normal;
font-size: 14px;
margin-top: 20px;
}
.videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {
color: #FFF;
font-size: 30px;
line-height: 40px;
}
.videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {
max-width: 500px;
margin: 0 auto;
}
.videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {
font-size: 18px;
line-height: 28px;
}
.videoBackground .placeholderNoblocks {
text-align: center;
max-width: 500px;
margin: 0 auto;
}
    @media screen and (max-width: 767px) {
body.template-index .main-content .videoBackground {
margin-top: -35px;
}
.videoBackground .fullscreen-video-wrap {
z-index: 3;
}
.videoBackground .videoBox {
          min-height: 500px;
          height: 100%;
          position: relative;
padding: 0;
      }
.videoBackground .fullscreen-video-wrap {
position: relative;
min-height: 300px;
}
.videoBackground .videoBoxInfo {
padding: 40px 20px;
    background: #000;
width: 100%;
}
    }
</style>
 
{% 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": "<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": {
"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": "<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": {
"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:

 

bandicam 2024-03-24 04-16-05-873.jpgimage_123655411.JPGbandicam 2024-03-24 04-15-36-505.jpg
Labels:
1,158 Views
0 Likes
Report
Replies 7 (7)

Guleria
Shopify Partner
4058 797 1146
‎03-23-2024 11:40 PM

Follow these steps:


1. Go to Online Store -> Theme -> Edit code


2. Open your base.css file and paste the following code at the bottom:

@media screen and (max-width: 767px){
.videoBackground .videoBoxInfo {
    padding: 0 !important;
    background: transparent !important;
}
}
- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
1,152 Views
0 Likes
Report
In response to Guleria

ChodaBRO
Tourist
8 0 0
‎03-23-2024 11:42 PM

Should I remove the previous code I inputted in base.css?

1,151 Views
0 Likes
Report
In response to ChodaBRO

Guleria
Shopify Partner
4058 797 1146
‎03-23-2024 11:44 PM

If not in use then you can. 

Note: Before making any change take a backup of the file. 

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
1,149 Views
0 Likes
Report
In response to Guleria

ChodaBRO
Tourist
8 0 0
‎03-23-2024 11:48 PM

It didn't solve the problem 😭

1,146 Views
0 Likes
Report
In response to ChodaBRO

Guleria
Shopify Partner
4058 797 1146
‎03-23-2024 11:55 PM

 

First this is not a problem it's a requirement you want to accomplish.

Second there is an issue in your base.css eem somewhere syntax is broken,
Remove the code I provided  rom base.css and follow this one
Edit theme.liquid search for </body> now just before it add this code

 

<style>
	@media screen and (max-width: 767px){
.videoBackground .videoBoxInfo {
    padding: 0 !important;
    background: transparent !important;
}
}
</style>

 

 

Note: I recommend to use the css in css file.  

 

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
1,142 Views
0 Likes
Report
In response to Guleria

ChodaBRO
Tourist
8 0 0
‎03-24-2024 05:21 PM
Click to expand...

 

 

 

1,069 Views
0 Likes
Report
In response to Guleria

ChodaBRO
Tourist
8 0 0
‎03-24-2024 05:29 PM

IMG_5349.png

 

Now, there is a white background below and above the video background. The 'SHOP NOW' button is also below the video. Can I change the dimensions in theme.liquid with the code you provided?

1,068 Views
0 Likes
Report

Community Blog Articles

shopp-e-1741972742895593780274096851.png
Canadian merchants: Update account details by March 24, 2025 to continue us...

Shopify and our financial partners regularly review and update verification requiremen...

By Jacqui Mar 14, 2025
Shopify_0-1741780029041.png
New learning path from Shopify Academy: How to create a digital marketing s...

Unlock the potential of marketing on your business growth with Shopify Academy's late...

By Shopify Mar 12, 2025
CRO-Community-Promo.jpg
Expert insights on conversion rate optimization (CRO) from Shopify Academy ...

Learn how to increase conversion rates in every stage of the customer journey by enroll...

By Shopify Mar 5, 2025
Terms of Service Privacy Policy