Resize Masked Video

How do we resize masked videos and Images? We basically want them in a bigger circle. Videos and Images are hosted on a WordPress server. When we utilize width and height parameters the media gets chopped off. Please see the screen recording for an explanation I have done side by side comparison with the Figma design.


https://streamable.com/qzs3kz

Comments

  • I'd like the video and images centered as well, right now both seem to be more deviated towards left even though I have set section position "center"

  • Hi,

    Please change the Mask shape size to Contain.

    Anyway, the video seems to be centered. Can you explain that greater, please?


    Thanks

  • It's already set to "contain"

  • But the circle/video size is too small as per our design.

  • Please send us the WordPress dashboard access privately through the contact form, which is on the right side at https://themeforest.net/user/muffingroup#contact and we will check it out.

    Notice!

    Please attach a link to this forum discussion.

    Sending incorrect or incomplete data will result in a longer response time.

    Therefore, please ensure that the data you send are complete and correct.

    Thanks

  • Just did, thanks.

  • In Theme options -> Custom CSS & JS -> CSS I have added a little CSS code that improves the display, and below your first section I created a new one with video.

    Currently, it is hidden, but you can show it back to see how it is constructed.

    BTW I noticed that you use negative margins and transforms to position the elements which is not the best approach for that, and I suggest you see the following video tutorial:

    https://support.muffingroup.com/video-tutorials/flexbox-positioning-with-bebuilder/


    Best regards

  • Thank you so much, Will CSS work on all other videos too?

    Thank you, we were clueless about the positioning of items too, plus how to remove extra padding from left and right if required. especially in full-width sections

  • 2/2 How can I align for example this text with the text above? I want it to start from where "Dafna Moscati" is starting &

    This is an embed external element. It can be deleted using the delete key or the backspace key. To view the full element, press the preview button below.
    Image
    dafna.png
    297.99 KB

    I want the position fixed for all "desktop" screens.

  • 1) This CSS has an influence on all video elements on your website.

    2) The first text is aligned to the center, and the one below is aligned to left. You must set the alignment to the top one to the left as well, and if you want to move further to the right side of your website, set some left padding to the wraps where these elements are inserted.


    Best regards

  • Thank you.


    How to remove left and right padding on page? I have set sections "full width" still there's too much space.

  • 2/2 This text needs to be aligned where it is right now (Starts with D of Dafna). I know you've advised adding on padding to the wrap, which I did, but it looks misaligned on bigger devices like 27" desktops, Laptop seems to be working fine. I appreciate your help alot.

    This is an embed external element. It can be deleted using the delete key or the backspace key. To view the full element, press the preview button below.
    Image
    ye.png
    377.75 KB


  • To explain it better to you, there's so much extra space left and right of each page, that we want a section to end with elements. Also, space between elements needs to be reduced.

    This is an embed external element. It can be deleted using the delete key or the backspace key. To view the full element, press the preview button below.
    Image
    padding.png
    438.19 KB


    This is an embed external element. It can be deleted using the delete key or the backspace key. To view the full element, press the preview button below.


  • Set this to the left:

    Remove padding from here:

    Set padding to the section:

    Best regards

  • Thank you so much, Worked like a charm.

  • This is an embed external element. It can be deleted using the delete key or the backspace key. To view the full element, press the preview button below.

    This needs your attention too, please check.

    This is an embed external element. It can be deleted using the delete key or the backspace key. To view the full element, press the preview button below.
    Image
    padding.png
    438.19 KB


  • What about this?

    I do not understand why the right side is marked, and on the left you can remove the padding if you want it to be closer to the left side.


    Best regards

  • Please see this side-by-side comparison with our Figma design. There's lots of free space left and right on each page, even when sections are set to FULL WIDTH. We don't want it. Removing/adding padding unfortunately misaligns the elements inside the section/wrap

    This is an embed external element. It can be deleted using the delete key or the backspace key. To view the full element, press the preview button below.
    Image
    design.png
    1.3 MB
    This is an embed external element. It can be deleted using the delete key or the backspace key. To view the full element, press the preview button below.
    Image
    livesite.png
    1.83 MB


  • You did not set this section to Full Width.

    It is Default at the moment:

    Best regards

Sign In or Register to comment.