Make background video full height mobile Dawn 7.0.1

[scotticus]

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.

 

[Small_Task_Help]

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

[scotticus]

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:

<style>

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;

}
</style>

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

<a
href="https://kilvay.com/collections/frontpage"><video class="small--hide" autoplay="" loop="" playsinline="" muted="">
<source src="https://cdn.shopify.com/videos/c/o/v/951e63076ead447ba472b5aad21f0093.mp4">
</video></a>
<source src="https://cdn.shopify.com/videos/c/o/v/2fb13b5f6705424098356fed48555fc0.mp4">
</video>

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

<source src="https://cdn.shopify.com/videos/c/o/v/951e63076ead447ba472b5aad21f0093.mp4">
</video></a>
<a href="https://kilvay.com/collections/frontpage"><video class="medium-up--hide" autoplay="" loop="" playsinline="" muted="">
<source src="https://cdn.shopify.com/videos/c/o/v/2fb13b5f6705424098356fed48555fc0.mp4">
</video>