Streaming live at 10am (PST)

How to align background video so window resizing grows/shrinks video from top downward (instead of from center)?


#1

Is it possible to have a background video (or image? same principle?) resize from the top downward instead of from the center?

To clarify - I want the top of the video resting against the top of the window, and if the window resizes, the top of the video display will not be affected, rather the bottom might get cut off a bit.

Right now, my top and bottom are getting cut off equally when I resize the window.

Here is my public share link: http://ashleycreighton-com.webflow.io/#home


#2

For bg images it's simple, it's controlled by this:

Here I chose bottom right to be my origin (the bg sticks to it).

Now for video it's not so simple. Because the Webflow component "Video bg" is NOT a CSS bg but only an HTML5 video playing in a structure of divs that is built to allow the video to always be centered. "Video BG" doesn't exist as a CSS property.

Funny thing is if you try to make that structure manually, using your own HTML5 video code, you'll see that it's not so easy to achieve :slight_smile: That's why I'm happy to use Webflow's solution because it does a good enough job in terms of quality (good enough here means close to ideal in most of the cases) and provides centering of the video in a snap.

For instance, if you do just this, building your HTML5 video code manually, you'll get what you're looking for by default: the video will stick to its upper-left origin and will not be centered.

Other advantages of making your own HTML5 video player: you control the quality completely and can play videos at a higher resolution and higher rate when needed, you control the code so you can decide of your poster and you can even serve different videos for different formats (used by some to serve smaller vids to mobile devices).

Cons of making your own HTML5 video player: you have to produce all your videos and poster (3 video formats and one image) and you have to host the videos on your own server.


#3

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.