How to question - half page responsive background video

Hi all,

I’m attempting to have a half page video, something like:

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

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

1 Like

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.


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


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?

This would be great:

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

@emmanuel ? Still looking for a solution here. Thanks

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

1 Like

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