How to fix mobile video banner size and change specific H2 font color?

Store Design
,
1

Hello! Hoping someone can help me with my video banner. I used the code below to add a video banner to my homepage along with overlaying text and the shop now button. It looks great on desktop but not on mobile. The video on mobile looks like it is zoomed in and not sized to fit. Also, is there a way to change the H2 font color to white but only for this section?

Trying to fix:

  1. The video looks great on desktop but not on mobile. The video on mobile looks like it is zoomed in and not sized to fit.
  2. I want to change the H2 font color to white but only for this section.

Thanks!

Here is the code I’m using for the video banner via custom liquid on the homepage:

{%- liquid
assign video_handle = ‘video url’
assign video_format = ‘mp4’

IMG_7964.png
IMG_7964.png1170×2532 301 KB

IMG_7965.jpeg
IMG_7965.jpeg4032×3024 1.32 MB

-%}

video { width: 100%; height: auto; display: block; margin: 0 auto; }

Great rest without compromise

GREAT REST WITHOUT COMPROMISE

SHOP NOW

Here is the css code I added to the base.css for the text and shop button over the video banner:

}
.video-banner {
position: relative;
width: 100%;
height: 800px;
}

.video-banner video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.video-content {
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
}

2

You full Style Change And Add My Style


After Add This Code In your Code You Add Only H2 Tag ,Right ??
add this Code in your Video Code

```markup

  

    
    

      ## Great rest without compromise
      

GREAT REST WITHOUT COMPROMISE

      [SHOP NOW](https://www.openairpillow.com/products/pillow)
3

Amazing Raj! Thank you so much.