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.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Neccessary

Necessary cookies help make a website usable by enabling basic functions like page navigation and access to secure areas of the website. The website cannot function properly without these cookies.

Analytics & Performance

Statistic cookies help website owners to understand how visitors interact with websites by collecting and reporting information anonymously.

Marketing

Marketing cookies are used to track visitors across websites. The intention is to display ads that are relevant and engaging for the individual user and thereby more valuable for publishers and third party advertisers.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.