How to make video align center please


(Alex) #1

Hello,

I found it is easy to make image to be center, but it is really difficult to make the video align center.

Attached, please check the hype document, and here is the url at our site: https://www.lovcour.com/fresh

you will find the video will always move from left to right when the safari browser is flexibly small to large.

would you please let me know what is the right way please?

Oh, it seems that I can not upload hype document again:

would you please check document at https://www.lovcour.com/fresh

Thanks.


#2

Hype Project: VideoCenter.hype.zip (40.7 KB)

This demo uses an image instead of a video - but the set-up is the same… the “Video” and masking element are placed in a group (i.e. “Video” Holder in this example); then set-up the group as needed in the “Flexible Layout” section of the “Metrics Inspector”. In this example the group is pinned on all four sides.


(Alex) #3

Hi Jim,

Thanks.

For me, it works fine locally, but it does not work in wordpress

Here are some issue:

  1. If the width of video is large than the scene, and enlarge the video size, it works locally, but it will be back to the original size in wordpress.

  2. At the same time, the video will alway align left.

Here is what my setting:

and here you could check at our wordpress site:

https://www.lovcour.com/fresh

This issue might be related to Hype wordpress plugin, so it might be more better to let @Daniel know.

I already upload the issue video and Hype document at:
https://share.weiyun.com/5Kp8wwY

please download for check as this screenshot show:

AND here is dropbox share link:

Thanks.


(Alex) #4

This issue seems from the mask.

If the mask is set to be hidden in Content overflow, the setting on video will all be invalid no matter the mask is hidden or shown in timeline.

Please check the screenshot:

and you may find it works fine if make the mask to be VISIBLE in content Overflow at https://www.lovcour.com/videoissue

and I really think it is a bug, @Daniel, what you think please?


#5

@alexlii

I have no experience at all with the Wordpress plug-in. Sorry!


#6

It looks like your video is correctly centered now, are you all set with this?


(Alex) #7

Hi Daniel,

Yes, but it works only if the mask is set to be VISIBLE in content overflow.

This issue will be only happens in wordpress, but works fine in local hype preview mode, so I tried a lots to check the reason, fortunately, it works fine in small width screen, but I am sure it will be out of control if the page is showed on large screen with high resolution since the things behind mask will show up .

For your comparing, I upload the one by Hype plugin with setting the mask to be hidden in content overflow, and it works fine in local, but the video will be align at left in wordpress:

https://www.lovcour.com/forvideoissuecheck

Also, I export a folder of the same and upload to our server:

and here is the url, you will find it works fine too:

https://lovcour.com/freshindexstartfortest/freshindexstartfortest.html

I tried to change the theme, but the issue is same, so it is not related to the theme.

So, what might be the reason of this issue please? does this mean it is related to Hype plugin?

Alex