[Resolved] Poster of gutenberg video block to cover all video area

[Ricardo]

Hi,

I don’t know if this is under the scope of this support, but, here it goes:

I would like to know how to make the poster of gutenberg video block to cover all video area, including the controls.

Like in 2nd section of this page:

https:/idealfado.com

Do you have any idea on how to achieve that?

Thanks in advance,
Ricardo

[Leo]

Hi there,

Can you link me to the page where the video is added currently?

[Ricardo]

Sure!

https://wordpress-262052-1321013.cloudwaysapps.com/index.php/inicio/

Thanks

[Leo]

Any reason why it’s inside a grid block?
https://www.screencast.com/t/cRcFYSfiCLE

[Ricardo]

Yes!

It’s the way I can have more control of the video size all over the different devices.

Also gonna use text in the left and video at the right.

[David]

Hi there,

i am not sure i understand the issue but is the Poster Image you have chosen the same dimensions as the Video ?

[Ricardo]

Hi,

In fact is not an issue! It’s more a “how can I achieve this?” 🙂

I’ve replaced with a 4:3 picture and the thing is the same.

I would like that the poster image to cover and hide the controls. Like in the 2nd section of this page:

https://idealfado.com

Update: with an image of the same size it is better. But would like to show controls on hover only.

Thanks!

[David]

Try this CSS to remove the play icon:

.video-cover:not(:hover) .video-play-icon {
    opacity: 0;
}

[Ricardo]

Hi,

Unfortunately it didn’t produce any change.

[Tom]

Hi there,

Is that CSS still added? I’m not seeing it on the page.

[Ricardo]

Hi.

Yes.

I’ve added to customize/aditional css.

Thanks

[David]

I am not seeing that CSS on your site.
Can you re-add it to the very top of Customizer > Additional CSS.
And then clear any caches.

Let me know

[Ricardo]

Hi,

I’m sorry for this inconvenient!

I really don’t understand why is this happening.

I don’t have any caches and disabled generatepress on the customizer.

Also, added some other css right now and it’s working.

You can check here

https://idealvideos.b-cdn.net/css.png

Also noticed that in google chrome the player doesn’t display a play button in the center of the poster, so only removing the controls from not hover won’t be a good solution.

If this is out of the support range, nevermind, I understand. I’ll leave it as it is. It’s not stylish, but it works!

Best regards,
Ricardo

[David]

Aah ok i thought you wanted to remove the play button which is what that CSS does … except it won’t remove specific play buttons added by the browser.

The other controls that appear when playing will disappear if you stop hovering over them, it may take a few seconds for them to hide

[Ricardo]

I think for what I need is more java than CSS, right?

Thank you anyway!

[Author]

Posts