Help With Video Header

Hi support,

I am currently using the video header, and it looks great up to desktop width. We have a call to action under the video header, but once the video header gets to desktop width the video takes up the entire screen (1080px tall). I tried many things, like editing the PHP file for the video header, changing the height of the containers in css, nothing works. I just want it to stop getting taller past a certain width (say 1140px). Any suggestions on how I could do this? Thanks in advance.

Site URL: fhstechsquad.com. YouTube link for video: https://www.youtube.com/watch?v=56LBt8oDdwg

Hello there,

Try the following CSS code:


.sydney-hero-area,
.fluid-width-video-wrapper,
#wp-custom-header-video {
  max-height: 75vh !important;
}

.fluid-width-video-wrapper {
  padding-top: 0 !important;
}

To apply to your site, add it into Appearance > Customize > Additional CSS in your site dashboard.

Regards,
Kharis

EDIT: It looks like the play/pause button goes all the way down, I tried adding it to the css rules under the button ID and class, with no avail. My custom rules don’t even show up when I inspect in Google Chrome. Any ideas?

Dude, you are the best. I was going through all the PHP files trying to change it and get it to work, and turns out I just had to use vh (I have no idea what that is and was using px, time to research). Thank you!!!

> My custom rules don’t even show up when I inspect in Google Chrome. Any ideas?

Your code might content an error. The easiest way to check is to go to CSS validator tool, paste your entire custom CSS code and hit the Check button.

You can read this article to learn about vh unit and to know why it benefits you.

Regards,
Kharis