Making video banner full screen with 16:9 ratio

BrentonLoui
Excursionist
29 0 8

Hi there! I hope your Thanksgiving weekend was fantastic. I'd like the video banner to be full screen with a 16:9 ratio on mobile, and I want the text "Elevating your style" to appear on top of the video, just like it does on desktop. How can I make that work?Screen Shot 2023-11-25 at 6.51.35 PM.png

Screen Shot 2023-11-25 at 6.47.55 PM.png

Replies 5 (5)

Abdosamer
Shopify Partner
821 146 165

Hi @BrentonLoui , can you share your store url?

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
BrentonLoui
Excursionist
29 0 8
Abdosamer
Shopify Partner
821 146 165

@BrentonLoui , it has the correct aspect ratio on mobile:

Abdosamer_0-1700968504020.png

 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
BrentonLoui
Excursionist
29 0 8

I'd like the video to occupy the full 16:9 screen on mobile devices, with the text overlaying the video. Please ensure there's no white space at the bottom of the screen.

Abdosamer
Shopify Partner
821 146 165

@BrentonLoui , go to section-video-banner.css and add the following code:

@media (max-width:768px){

     .video-banner__media--cover video {
    object-fit: cover;
    height: 50vh !important;
}
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples