Video background not fixed at top of screen

[wowflak]

I have a video background on a home page but the top of the video is being cut off, like it is not starting flush with the browser window, not sure why this is? Please see code and link in private note. Thanks

[marc_a]

Hi @wowflak,

Thanks for reaching out!

I just check your website and the video is already fixed at the top of the screen.

If you are seeing something else on your end, it might a browser cache. I suggest that you clear your browser cache.

Thank you.

[wowflak]

Thanks but it is not, it is cutting off her eye, you should see more, cant tell by what you pasted in here but I want the very top of the video to show. Basically no matter what you do with the browser window I want the top fixed to the top…

[nabeel]

Hi @wowflak,

This is most probably happening due to the video dimensions, with your custom CSS in place the video tries to adjust and fits in by cropping some part of the video, you can make it look a bit better if your remove the height property from your custom CSS. You can replace your CSS with the following:

<style>
video {
  object-fit: cover;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
}
</style>

This will stop cropping the top part of your video. Hope this helps!

[wowflak]

Thanks, I have tried that but then it cuts off on the sides, I want it to cover but I just want it to always start from top down. I thought the top:0 and left:0 should do that?

[marc_a]

Hi @wowflak,

The code given by my colleagues will fix the issue about the top cut off but I am not quite sure what do you mean by it cuts off on the sides. See the example image below when the code is applied.

You could also try to CSS code and let us know if it fits your concerns.

video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    top: 0;
}

Thank you.

[wowflak]

Excellent, that works for desktop and I just made a media query for mobile with the original css. Works great now! Thanks all

[marc_a]

Hi @wowflak,

You’re welcome and it’s our pleasure to help you! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.