Making video banner full screen with 16:9 ratio

[BrentonLoui]

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?

[Abdosamer]

Hi @BrentonLoui , can you share your store url?

[BrentonLoui]

https://inthemake.co/

[Abdosamer]

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

[BrentonLoui]

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]

@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;
}
}