Why is my video banner not working properly on mobile?

[Melissa211]

Hey everyone,

I’m working on my first theme and I’ve just added a video banner (I got the code from this video). It works perfectly on desktop, but my mobile banner has a large black section under the video and my menu isn’t working. I’ll link to the site below. Any ideas?

happytuesday.co

[oscprofessional]

@Melissa211
Hii,

Add this css at the @media screen and (max-width: 767px) of Online Store->Theme->Edit code->Assets->theme.scss.liquid

.videoBackground .videoBox {
  min-height: 300px !important;
}

.videoBackground .videoBoxInfo {
	padding: 40px 20px !important;
	background: transparent !important;
	width: 100%;
	position: absolute !important;
	top: 70px !important;
	z-index: 999 !important;
}

Result