Poster of gutenberg video block to cover all video area

Hi there,

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

Sure!

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

Thanks

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

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.

Hi there,

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

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!

Try this CSS to remove the play icon:

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

Hi,

Unfortunately it didn't produce any change.

Hi there,

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

Hi.

Yes.

I've added to customize/aditional css.

Thanks

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

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

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

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

Thank you anyway!