Video Banner Boundless Theme Mobile Viewing

rpr
New Member
4 0 0

Hello,

Can someone please help me figure out how to resize my video banner so that it can been seen properly on mobile devices. I am not well versed in coding however i was able to scour the internet and found a way to add the video to replace the generic slideshow. The issue i am having is that the video is too large on mobile devices and part of it gets cut off. 

Any help is greatly appreciated. 

Thanks in advance!

0 Likes
dmwwebartisan
Shopify Partner
7454 1770 2372

@rpr 

Please share your webshop URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
dmwwebartisan
Shopify Partner
7454 1770 2372

@rpr 

Unfortunately, there is no simple solution for this. It would need customization for slider.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
rpr
New Member
4 0 0

Below is the code i found and used. If i were to remove it and go to the original version, is there another i can add the video to replace the slideshow?

Thanks.

 

i added this to the index.liquid

<section class="video-slider-area">
<div class="video-slider">
<video src="https://cdn.shopify.com/s/files/1/0568/1610/7673/files/Sizanii_resized_video4_shopify_1.mp4?v=162344..." autoplay muted loop playsinline></video>
</div>
</section>

<div class="hero__header">
<div class="action-area">
{% include 'action-bar' %}
</div>
</div>
</div>
 

then added this to the theme.scss.liquid

 
video {
  width: 100% !important;
  height:auto!important;
}
 
 .video-text {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
 .video-slider-area {
height:800px;
width: 100%;
position: relative;
overflow: hidden;
}
 video {
object-fit: cover;
position: absolute;
height: 100px;
width: 100%;
top: 0;
left: 0;
}
 
 .video-slider-area:after {
content: '';
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, .2);
z-index: 1;
}
 
.video-slider-area video {
    height:750px!important;
}
 
 h1 {
text-transform: uppercase;
font-weight: 900;
margin: 0 0 1rem;
padding: 0;
line-height: 1;
font-size: 32px;
font-weight: 700;
}
 @media (max-width: 400px) {
h1 {
font-size: 18px;
}
}
 @media (min-width: 1200px) {
h1 {
font-size: 32px;
}
}
 .video-text {
font-weight: 400;
font-size: 18px;
}
 
0 Likes
dmwwebartisan
Shopify Partner
7454 1770 2372

@rpr 

 Try this css code 

 Please add the following code at the bottom of your assets/theme.css file.

@media (max-width:400px){
video {
  width: 100% !important;
  height:auto!important;
}
 
 .video-text {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
 .video-slider-area {
height:800px;
width: 100%;
position: relative;
overflow: hidden;
}
 video {
object-fit: cover;
position: absolute;
height: 100px;
width: 100%;
top: 0;
left: 0;
}
 
 .video-slider-area:after {
content: '';
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, .2);
z-index: 1;
}
 
.video-slider-area video {
    height:750px!important;
}
 
 h1 {
text-transform: uppercase;
font-weight: 900;
margin: 0 0 1rem;
padding: 0;
line-height: 1;
font-size: 32px;
font-weight: 700;
}

}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
rpr
New Member
4 0 0

Unfortunately, i did not work. 

0 Likes