Support Center Visit Demo License manager Buy @ envato

Huge gaps above and below embedded video at mobile view

hamiter_1hamiter_1
in BeBuilder
Hi. I've searched for this problem and haven't found a specific to Muffin Builder. I'd appreciate your help. Issue: Embedded Vimeo video has large gaps of white space above and below it – Tablet and mobile (desktop is fine).

Here is how the link to the video is set up in the video widget: https://player.vimeo.com/video/429020631/?autoplay=1&loop=1

This site is still under development so I'm not sure if you can view the page, but here it is: https://development-new.hamiterinc.com/work/eyecare/

If you can view it, set it to responsive and you'll see what I'm referring to. Many thanks in advance for your assistance!

Comments

  • PhilPhil
    Hello,
    Please, edit section before the one that contain this video, and set "Padding | Bottom" to zero, or any low value that will suits you.
    https://prnt.sc/vduqt3

    You can also edit wrap inside that section, and set "Margin | Bottom" to some low value.

    If you want to get rid of space below video, do the same steps as above to the section that contains video.

    Also if you want these modifications to be visible only for Tablet and mobile, you will have to create two extra sections, that will contain the same things (text and video), but hide them on desktop by setting "Responsive Visibility" to "Hide on Dekstop", and hiding the original two on Tablet & Mobile.
    https://prnt.sc/vduy1j

    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • csyringcsyring
    Hello Phil,

    I'm facing the same issue. I am also showing a video hosted on vimeo, where it doesn't have any margins around at all. After embedding, I have 120px margins above and below the video!
    I already have set the margins and paddings as shown in your screenshots. It didn't help.

    @hamiter_1: How did you manage to only have a margin of 30px above and below?

    Thanks for your help
  • csyringcsyring
    Hello again,

    well, the problem lies with the aspect ratio of the video. Mine is rather narrow. In any view (desktop or mobile) I expect the video to stretch across the width of the page or the section. It's height should be automatically adjusted.
    In BeTheme's video item, I can specify a width and height, which only works well and hides the margins if the page is viewed in the size that I developed the site for. As soon as I resize the browser window, the margins appear again. This is what happens with hamiter_1's video on mobile devices.

    It would be nice if it was possible to automatically adjusts the video height in relation to it's width.
  • PhilPhil
    csyring,
    You can still create a section that will be visible only on desktop display, set there video width and height, and do the same with mobile display, so it will display properly for all devices.

    But if you would like to see this automatic adjust as a feature, please, let us know about this in following topic, where you can give us your ideas for future updates.
    https://forum.muffingroup.com/betheme/discussion/113/your-suggestions-for-future-updates#latest

    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.