[Resolved] hero video

[Jana]

• I’ve read the instructions and this is what my html looks like:

<video loop muted autoplay poster="HOME-bull-elephant-karner-blue-capital-b-2056x1161" class="background-video">
	<source src="https://centerforahumaneeconomy.org/karnerbluecapital/staging/wp-content/uploads/2019/09/KBC_Butterflies.mp4" type="video/mp4">
</video>

<div class="background-video-content">
    Your Element content in here.
</div>

• And I’ve added this to Additional CSS for site:
.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%;
}

And this is what it looks like – there’s no hero at all-image or video: https://centerforahumaneeconomy.org/karnerbluecapital/staging/karner-blue-capital-partial/

This is what it should look like – I’ve done this with video in Elementor – but think using your Elements would be better for speed/integration – do you agree with that?
https://centerforahumaneeconomy.org/karnerbluecapital/staging/

Thanks, Jana

[Tom]

Hi Jana,

Can you try adding some top and bottom padding to the Hero? It currently doesn’t have any height, so only a tiny bit is displaying.

Let me know 🙂

[Jana]

Thank you so much – it now works perfectly – I’m indebted to your theme and knowledge! I know using the element would be so much more seamless than adding a video to the page!

I am now hoping to imprint an logo on top of the video with this coding – I’ve experimented but haven’t gotten it to work.

<img src=”https://centerforahumaneeconomy.org/karnerbluecapital/staging/wp-content/uploads/2019/08/white-logo-trans-sm-copy.png
“width=”325″ height=”165” alt=>

Thanks! Jana

[Leo]

Looks like some HTML errors. Can you try this instead?

<img src="https://centerforahumaneeconomy.org/karnerbluecapital/staging/wp-content/uploads/2019/08/white-logo-trans-sm-copy.png" class="avatar avatar-80 photo" height="325" width="165" alt="">

[Jana]

Thanks I’ll try this but first I’m having a problem when I set the page with the hero-video element as Homepage in the Homepage Settings of Customize, the place where the video should be is blank.

Also, how can I move the image in the coding about higher on the video hero page (right below the nav bar)?

Thanks, Jana

[Leo]

I’m having a problem when I set the page with the hero-video element as Homepage in the Homepage Settings of Customize, the place where the video should be is blank.

Not quite sure if I understand. Can you explain a bit more?

Also, how can I move the image in the coding about higher on the video hero page (right below the nav bar)?

Where can I see this issue?

[Leo]

I’m having a problem when I set the page with the hero-video element as Homepage in the Homepage Settings of Customize, the place where the video should be is blank.

Not quite sure if I understand. Can you explain a bit more?

Also, how can I move the image in the coding about higher on the video hero page (right below the nav bar)?

Where can I see this issue?

[Jana]

The video in elements looks fine here:
https://centerforahumaneeconomy.org/karnerbluecapital/staging/karner-blue-capital-1/

UNTIL I set the above page to be the homepage in Appearance > Customize > Homepage Settings > Homepage – then the video and image disappears.

[Leo]

Did you change the display rule of that header element?

[Jana]

Hwre’s the page which looks fine UNTIL I try to set it to be the site homepage – then it just drops off the video entirely:
https://centerforahumaneeconomy.org/karnerbluecapital/staging/karner-blue-capital-3/

I just checked it on a private browser window and the video didn’t show up there either.

My Display Location rules are set to this page and the exclusion rules are set to only difference pages. No entire site, etc.

Just to recap – HTML in element:
<video loop muted autoplay poster=”https://centerforahumaneeconomy.org/karnerbluecapital/staging/wp-content/uploads/2019/09/bull_elephant_karner_blue_capital_2056x1161_dk-1.jpg&#8221; class=”background-video”>
<source src=”https://centerforahumaneeconomy.org/karnerbluecapital/staging/wp-content/uploads/2019/09/KBC_butterflies.mp4″&gt;
<source src=”https://centerforahumaneeconomy.org/karnerbluecapital/staging/wp-content/uploads/2019/09/KBC_butterflies_.webm&#8221; type=”video/webm”>
<source src=”https://centerforahumaneeconomy.org/karnerbluecapital/staging/wp-content/uploads/2019/09/KBC_butterflies_.ogv&#8221; type=”video/ogv”>
</video>

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

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

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

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

[Leo]

Can you try changing the display rule to Front Page instead of that specific page?

[Jana]

Ok – officially an idiot here – works perfectly! Works a million times better than embedding a video in the page!

Now all I need is a way move up the “Your Element content in here.” to be under the nav bar and increase size of the typeface.

Thanks so much for you help!

[Leo]

You can modify the top and bottom padding as suggested here:
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-5-position-the-content

[Jana]

Thanks for the link – I’ll check it out. And thanks developing this awesome theme!!

[Leo]

No problem 🙂

[Author]

Posts