Make background video full height mobile Dawn 7.0.1

Hello,

How do i make video full height and remove the white bar at bottom of video on mobile password page?

LINK: https://kilvay.com/

Thank you.

Hi,

At “hero.liquid” or “video-section.liquid.” , Add following code (at code that defines the video section or container)

@media (max-width: 767px) {
  .video-section {
    position: relative;
    height: 100vh;
    min-height: 100%;
  }
  .video-section video {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}
1 Like

Hey @Small_Task_Help ,

Thank you for the help. I tried adding the code but wasn’t sure where to add it.

This is my custom liquid code:

video { display: block; margin: 0 auto; width: 100%; height: 50%; top: 0; } @media (max-width: 749px) { .small--hide {display: none !important;} #Banner-template--17087053857079__main { position: fixed !important; z-index: 100 !important; top: 50% !important; transform: translateY(-50%) !important; left: 20px !important; right: 20px !important; } } @media (min-width: 750px) { .medium-up--hide {display: none !important;} video.small--hide{ height: 100vh !important; object-fit: cover !important; position: fixed !important; }

{% comment %} Desktop Show {% endcomment %}

{% comment %} Mobile Show {% endcomment %}

Screenshot 2023-07-11 at 14.23.44.png