I’m having a problem.
Bubble only integrates with 3 video providers.
I use Wistia and am trying to configure a video background on half the page vs. the bubble full page video background feature.
I wish there was an easy way that we could configure the video to call via the Bubble API and have it responsive on Bubble using the natural Bubble Video element… Either that or a way to make an HTML element shorten/responsive based on the html contained within it. Can this be added?
I don’t want to use YouTube because you can’t hide their controls and it’s just not a good solid player for high traffic…
The HTML inside the HTML element is responsive from Wistia. but the HTML element itself isn’t on Bubble.
So what happens is there is a LARGE void under the video and the bottom of the HTML element of white space.
If I make a second element HTML element that’s smaller, I still have a white space between the other elements on the page because any which way I look at it, an HTML element isn’t responsive on Bubble…
Does anyone have any thoughts or ideas on how to integrate a responsive code onto the bubble page as an HTML but actually have it be responsive? Right now it’s a responsive element within a non-responsive element which defeats the purpose.
Doesn’t it make sense to allow an HTML element (or any element) to be responsive height-wise vs. side to side?
I’d like to see height-responsive elements too. I had a similar problem and fudged around it by hiding the white void with a floating element. This is only really suitable if your page isn’t intended to scroll, though.
Is there really no ability to make something respond height-wise yet? Or a solution to fill this white void?
Seems that there definitely should be…
The adjust to content’s height option on the HTML element doesn’t do it?
1 Like
Didn’t see it. Will check!
Are you sure this option is activated? I cannot find it anywhere.
Ok was looking for different wording.
I still get a void:
- my video script (html) is responsive, does it need to be fixed so that Bubble can grab onto something that’s stable?
- is there a way to collapse the height of an entire group that contains my html so that the Signup Bar you see in the above image (now on the bottom of the screen) is always fixed in position?
The HTML element gets redrawn when the user resizes the page, so what is inside doesn’t need to be responsive.
We don’t have a way to collapse HTML elements’s height yet. If you can set up a page only for this with on element where we can test we can look into it.
I’ve adjusted the html from responsive to fixed width when page width less than 1200 and “stretched” to fit content which works in that regard but doesn’t keep the video left-right proportions. Looks like that won’t work either…
We could add a feature to adjust the height to something shorther if the element inside is shorter, but with your current design, that won’t work as you have some elements on the top of the HTML. Why not using video as a background?
1 Like
I thought you could not do a half screen video background hence why I’m using an external video player?
Well you can have that on the background and put some elements on the top of it, mimicking half screen. Why don’t you try? That sounds like a better option.
I’ve done this now but the video is cut in half like what I thought would happen.
Is there a way to make the background respond to elements placed over top of it? I figure this is no as it’s a BG for the page itself…
https://testingapplication604.bubbleapps.io/version-test/video_background?debug_mode=true
I also had tried to hide a collapsing group that contained the HTML element when the page is under 1200 but the group doesn’t collapse… Is there a reason for this? If this would actually collapse I could step-down the sizes based on resolutions for 300 px, 12, 13, 14 inch monitors etc. and place a number of overlapping groups with html elements that hide based on page width.
https://testingapplication604.bubbleapps.io/version-test/collapsing_groups?debug_mode=true
The responsive height would be very good to have. I have isolated it in case your team wanted to address it.
https://testingapplication604.bubbleapps.io/version-test/responsive_height_?debug_mode=true
the responsive height won’t work for you here, since you’re putting some groups on the top of the HTML element. Background image is your best option i think.
I tried the video background (link above) but it doesn’t respond with a group overtop and uses the entire page naturally as the background. If I fixed the size of the video it also doesn’t respond to the group.
What about the collapsing group issue?
I could simply put the html into it’s own group, set it to collapse, and put the currently overlapping group (email signup bar) below it in a seperate group which, if it were working, should collapse and remain directly under the html group/video. For some reason the group won’t collapse though. Does text overtop of the video cause the group not to collapse? Or is strictly group over group that doesn’t work?
Yes, if you use the responsive debugger you’ll see that if two elements are on the top of each other, they’re considered as one box.
Hmmm Ok.
It seems I’m out of luck here completely then…
- Background video is too large and doesn’t respond to the screen size. It takes up the entire page as a background and where visible, you only see a portion of the video.
- Collapsing Group doesn’t work because there is text overtop of the group causing it to remain static.
- HTML can be “stretched to fit content” but that still doesn’t address the Void created beneath the video between the bottom of the html element/group and the bottom of the resonded video.
I would work with 1) and make it work design wise. I’m sure there are options that would look good.
