I want to have a video header on my main WordPress site. I use Page specific stylesheet, on my main page, with this code, to make the header on the whole page:

.site-header {
    height: 100vh;

I do also use Video Background, to insert a video. This is how it looks:

enter image description here

It works on desktop, but on smaller screens, it shows grey, on the top and the bottom. On phones, it doesn't show up at all. Can I fix, or would you recommend another methode?

Link to the page: www.gullhaugensport.no/hannepanne


I think you need to change the CSS on your video element. Remove the max-width: 100% and set the height to height: 100vh;. It will crop the edges of the video on smaller screens, but that can't be helped if you want it to be full screen height.

  • I changed the max-width to none. It works on desktop browser, but it is not showing up on mobile. How can I fix this? – vladasha Jan 28 '17 at 8:57
  • It works fine on my Android phone. If you are looking at it on an iOS device you should know that autoplay is a problem. Have a look at this article: webkit.org/blog/6784/new-video-policies-for-ios – Alexander Holsgrove Jan 28 '17 at 10:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.