Center video

Hi guys, if you look at the website im developing https://www.villagavazzini.com/video1/ , you can see that if you click on the play button in the center of the splash screen, it appears a video on pop-up, but it’s not centered. how can i do to do it?
tx for your help

The size of your video and pop-up are not matching. Trying to put a fixed width of 1278px into a fixed width of 300px creates challenges.

It appears your video has been set in a modal that is set to a small or medium size, but the video is set at a much larger size - causing it to spill over the model pop-up. For this type of application its better to use the any video bric. This has a wide range of options that aren’t availble in a normal modal

I reckon that one! The Any Video Bric is awesome and worth every single penny!

2 Likes

Hi @Jerry,
Your discovery and insights are so helpful. I appreciate seeing how how your are willing to help all of us.
When you get time, would you tell me how you discovered the size difference?

Browser inspector @KBConcepts

1 Like

I figure it was that, but where do you look both both settings?

In this case, it’s been set with attributes with the embed code, but you can see the css to the right.

Got it, so you find this under iframe. Thanks Pete

guys thanks to all for your answers! just the last question: why when i embed vimeo video, there’s not the fullscreen icon?

For me there is.

1 Like

Hi @davideakadudu this can be browser depending, remove lazy load - this works in Vimeo and brings the fullscreen icon back.

1 Like

100% agree.

ok thanks, but i need you one more time:
is there a way to make all the video in backroung clickable to open the popup window with the vimeo video? should i make a fullscreen button with the video inside?

I would use Onclick as a custom attribute.

what’s onclick Jerry?

Ever heard of google? :thinking: :person_shrugging:

https://www.google.com/search?q=what+is+onclick()

1 Like

Or .stretched-link from the icon button. But the wrapping container needs to have a position of relative for it to work.

1 Like

There are countless solutions to the same problem! :laughing:

Native Bootstrap vs inline JavaScript :thinking:

I think the BS wins :joy: