How to question - half page responsive background video

Need help
1

Hi all,

I’m attempting to have a half page video, something like: https://demos.pixelgrade.com/listable/

I know it’s possible to set the background of an entire page to a video, but that’s not the right solution for me. I’ve found some code on codepen, but can’t work out how to the css.

The best I can do is using the video.js plugin, but that shrinks the video and puts a big letter box effect at narrower screen sizes. i.e https://vizzy-v2.bubbleapps.io/version-test

I’ve searched for hours and just can crack this. Any help would be appreciated.
Thanks

1 Like
2

What I’ve done previously is to embed either a video element or an iFrame inside of a parent group, which is 1200px wide. (My standard full size page is 1200px).

You could also try converting the video into a high quality GIF and setting the background type of a group to image.

3

Hi,

Have you tried putting the video either using the plugin or html with embed code inside a group that spans half the page?

Not tried it before but would have thought it would work

Simon

4

Hi Dan, thanks for the suggestions - it’s really appreciated.

I had a go with the gif idea, but the gif element is over 30mb, so that’s killed that idea.

The video in the iFrame inside a parent group does what I want, but its not responsive, as far as I can tell. The video becomes letterboxed.

Any other ideas, or code examples would be immensely appreciated. I can’t believe bubble doesnt have this functionality. @emmanuel any ideas?

5

This would be great: https://codepen.io/mattgrosswork/pen/jrdwK

But I cant get the CSS to work. :frowning:

6

@emmanuel ? Still looking for a solution here. Thanks

7

@emmanuel? Helloooo? Or anyone really? Kinda sucks that I cant do this on this platform.

1 Like
8

This topic was automatically closed after 70 days. New replies are no longer allowed.