[Resolved] Assistance with Video Element

[David]

Hi there,

I am hoping you can assist please? I am working on this webpage, and have included the current iteration of the HTML and CSS further below:-
https://darkstories.com.au/holidayshow/

I am just not sure of how to tweak the html/css to achieve the following (I have tried several variations):-

– For the video to display directly under the menu (currently this is a gap), but keeping the video at around 80% height.
– There is content that I want to display below the video which is currently displayed in the same section of the page as the video.
– For the opacity I have left it transparent so you can see the issue, but I will remove opacity as the last step.

Please let me know if you see any obvious mistakes with the below. Any assistance will be greatly appreciated.

Best Regards
David

HTML
<video loop muted autoplay poster=”https://darkstories.com.au/wp-content/uploads/2021/10/Zombie-Holiday-Show-Poster_M.jpg&#8221; class=”video” width=”100%” height=”80%”>
<source src=”https://darkstories.com.au/wp-content/uploads/2021/10/The-Zombie-Holiday-Show.webm&#8221; type=”video/webm”>
</video>

CSS
.video {
position: absolute;
top; 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.7;
}

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

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

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

[David]

Hi there,

just to be clear, should the video element sit between the navigation and the content ?
If so you can use a Header Element:

https://docs.generatepress.com/article/header-element-overview/

And use the HTML you originally have as explained in this doc:

https://docs.generatepress.com/article/page-hero-background-video/

Let me know if i understood correctly.

[David]

Hi David,

Thanks for your help; that approach has resolved everything with the exception of 1 hopefully small issue.

The Header Element is set up for the page in question, and the HTML and CSS improved from the previous setups.

However, I am trying to set the height of the video to 80% & width 100% (I am comfortable with cutting a portion of the video), but have not had any success. Is this something you can advise upon too, please?

Kind Regards
David

[David]

When you say 80% of the height, do you want to crop the video or distort its content so you still see all of the video but its just been ‘squeezed’ into the space ( i am not sure about this … )

[David]

Hi David, I am looking to crop at 80% height-no distortion. I hope that makes sense.

Regards
David

[David]

You could try this:

1. Edit the header element, and in the element classes field add: video-container
2. Add this CSS:

.page-hero.video-container .inside-page-hero {
    max-height: 80vw;
    overflow: hidden;
}

Instead of % we’re using VW ( ViewPort Width ) units. This will set the height to 80% of the screen width. Adjust the value to suit.

[David]

Hi David,

Thanks for the info; I didn’t have much luck with this setting.

When I got it to have an impact; it reduced the video to a very small box inside a full-width container. I tried other settings e.g.- height: 80vh amongst others.

For now I have stripped the code clear leaving the video as full size, as I needed to display it to clients in relatively good shape.

I don’t suppose there are other options that can be considered that you could recommend? I even tried a negative position value at the top level, but could not get any change.

Sorry to trouble you.

Regards
David

[David]

I just added the CSS i provided to the site using the Chrome Developers tools and it worked for me. I had to reduce the 80vw to a smaller size eg. 50vw to see a noticeable difference.

[David]

Thanks David; I’m so sorry. You are correct- I was not setting the value low enough, and have settled on 47vw.

I really appreciate the assistance, and I hate to be greedy with requests.

Could you also advise on the vertical alignment please? I was always expecting to lose some video content at the top, but the current settings cutoff from the bottom of the video. Is it possible to do this?

Lastly(I promise), I’ve also during today decided to add a clickable button(if possible) to the centre of the video. I have created an example, but can only ever get the button to display above the video, or below the video. Would you have any suggestions please?

Thank you so much for the assistance.

Kind Regards
David

[David]

No problems… but lets start over 🙂 Remove any CSS you have so far.

Then Referring to this document:

https://docs.generatepress.com/article/page-hero-background-video/

Add all the HTML, and the CSS provided.
In this part of the HTML:

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

You would add your button like so:

<div class="background-video-content">
    <a class="button video-hero-button" href="the_link_url_goes_here">Your button text</a>
</div>

Once thats in place i can provide some CSS to set the height of the header element and the hopefully position the background video.

[David]

Thank you for your patience. I have made those changes now.

Kind Regards
David

[David]

Now try adding this CSS:

.page-hero.video-container .inside-page-hero {
    display: flex;
    flex-direction: column;
    height: 1000px;
    width: 100%;
    justify-content: center;
    align-items: center;
    max-height: 50vw;
}

Again adjust the max-height to suit 🙂

[David]

Thanks David, that all is looking fantastic now. Sorry for the back and forth. I am very grateful for the assistance. Every issue is resolved.

Best Regards
David

[David]

Awesome – really glad to hear that!

[Author]

Posts