How can I fix white space issues in full-width background videos on Dawn 7.0.1?

[scotticus]

Hello,

I have a background video for both mobile and desktop. They show white space at bottom when the page dimensions are moved? How do i fix this to force full height and width?

Thank you!

Here is the current code:

<style>

video {

display: block;
margin: 0 auto;
width: 100%;
height: 50%;

}
@media (max-width: 749px) {
.small--hide {display: none !important;}
}
@media (min-width: 750px) {
.medium-up--hide {display: none !important;}
}
</style>

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

<video class="small--hide" autoplay="" loop="" playsinline="" muted="">
<source src="https://cdn.shopify.com/videos/c/o/v/a72cf8e0d7914ac585b636e85115f6c1.mov">
</video>

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

<video class="medium-up--hide" autoplay="" loop="" playsinline="" muted="">
<source src="https://cdn.shopify.com/videos/c/o/v/8d8e30c2d98c4859beeceb1dbd54fc1f.mov">
</video>

https://silicorestudios.com/

 

[BSS-Commerce]

Hi @scotticus 

Please go to Online Store > Edit code > assets/base.css and add this CSS at the end of the file

section.shopify-section,
.color-background-1,
.section-template--17087053726007__2326934d-74c3-4794-87e2-cce0da6d87be-padding,
.color-background-1 video {
 height: 100% !important;
} 

.color-background-1 video {
 object-fit: fill !important;
}

I hope that it will work for you.