Background Video to Scroll Up?

Custom code
1

Hello all,

This is my first post here.

I am really enjoying using the Readymag at the moment.

I have come across one stumbling block, though.

I have tried using a video as a background, but it looks like the video can only be used as a backdrop for the whole of the page.

I would ideally like the background to take up 100% of browser width and height, and then scroll up with the rest of the content.

I remember doing this in HTML in the past and I remember it was not too difficult.

Did anyone come across and have you managed to fix this problem?

Many thanks in advance!

1 Like
2

The Background option follows the standard HTML specifications; therefore, it is static and will scale the content (image or video) and fill up the viewable area.

What you are trying to achieve can be tackle with easier methods. A few ideas:

  • If your project has pages stacked vertically, you can set the desired background on, say page 1 (using the background option); once you scroll to the next page, the background will scroll up and the content of page 2 will be presented.
  • If you want an image as background, use the picture w and set its position full w but not full h. This way, the widget will cover the background area you set and move up along the scrolling of the page.
3

Many thanks Samus!

I wish that you could group pages so that only some of them are stacked. That would be ideal but does not work for me now because I need to have multiple pages.

Another solution I found is to set a video as a background to a page then cover all other content with a white rectangle. In my example, I made one rectangle for the top, one for the bottom, and left an empty area towards the middle of the page. This way, when user scrolls down, at one point they see the video. Not ideal but in this case works.

1 Like
4

Clever! That’s what I like about Readymag, it gets on my nerves sometimes but overall, I like how limitation pushes creativity.