[Resolved] Header Background Video

[Ighty]

Hi,
I followed the instructions https://docs.generatepress.com/article/page-hero-background-video/ but I still can’t have a decent header with the video on the background. Looking at these examples https://docs.generatepress.com/article/page-hero-examples/ show me that the height of the header is good enough, however I’m not able to have the video full height, only one line. What am I missing?

edit:
I’ve added a CSS: .background-video {width: 100%}

but I’m still not sure about the process, if it’s correct or not. I’m not familiar with this theme and seems a bit tricky to get things done 🙁

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

[Ighty]

link added, thanks 🙂

[Leo]

I do see a full screen page hero already:
https://www.screencast.com/t/XBYTHjv8G

Is this not what you are seeing?

[Ighty]

yes, I had to add an extra css code and I’m not sure it is the correct way to do it.

[Leo]

Your CSS is needed because the original video itself isn’t big enough to fill the screen.

[Ivan]

Hi!

Following the instructions
https://docs.generatepress.com/article/page-hero-background-video/
I’ve inserted a background video into the header. That video spreads on full screen. But I need it to be located only in the header. For one screen type, eg desktop, it is possible to set fixed video height in css, but the header height changes in mobiles and tablets..
What do I have to do to fix it? Maybe there is some function, that returns current header height and I can add it to css:

video[poster] {
object-fit: cover;
width: 100%;
height: 100%; (here)

[Ivan]

What I want is to make the header look like here: http://www.sarastarcharters.com/2016/02/hello-world/

[Tom]

Hi there,

That should be what it does by default. Can you link me to your site?

[Ivan]

https://hairgrow.ru

[Tom]

It looks like you’ve added the video before the header. Can you try hooking it into the before_header_content hook?

[Ivan]

Well, Tom, in Safari everything is perfect, except header content transparency: when I add background video, header logo, text and widget become little bit transparent, so they loose in contrast.. I’ve tried to change the video opacity in css, but it’s not what I need. I’d like header content to be not transparent at all.
Also your method doesn’t help in Chrome. That’s strange: in mobile chrome everything works:

but in the desktop one header video starts from top panel and spreads to the middle of the screen:

[Ivan]

Also when I set video opacity in css at 1, header content disappears at all

[Tom]

Your URL doesn’t seem to be working anymore.

If you want the video background to apply to the site header only, inside the site header is the proper place for it. We may just need to tweak some of the CSS to get it working perfectly.

[Ivan]

I’ve checked url, it works at the moment: https:\\hairgrow.ru
Yes, sure I want to apply background video to the site header only.

Now there is this code in the Elements menu (hook – before_header_content, location – entire site):

<video loop muted autoplay poster="https://hairgrow.ru/wp-content/uploads/2019/05/photo-1465080207318-3de7361f84e7.jpg" class="background-video">
    <source src="https://hairgrow.ru/wp-content/uploads/2019/06/Bokeh-4413.mp4" type="video/mp4">

</video>

<div class="background-video-content">
</div>

and this, inserted via simple css:

.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

.page-hero {
    position: relative;
    overflow: hidden;
}

.background-video-content {
    position: relative;
    z-index: 1;
}

video[poster] {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

It seems to me, that with this code video is not at background, but it lies over the header content. Also it is not clear, why it doesn’t work correctly in google chrome.

[Author]

Posts