Full browser height video in header

Hi,

My client has asked me to create a video that automatically plays in the header of the index page at full browser height. I don't event know if this is possible? I know you can stretch them to full width but the height is determined by the proportion (16:9) of the source video and not your browser...

I'm about to create the movie which will take a couple of days and i'm not sure if I should make something really deep (1920x4000) to cheat it, and if this is even workable.

their wish is to have a movie (with back-up image) that fills the entire browser window regardless of size, the content over the top then appears as normal, before scrolling down to the rest of the page content below the fold. I've seen this on other sites but not on Squarespace.

I've tried getting this to work with a normal image and that's 'quirky' as it never scales quite right to fill the screen, even selecting 'full bleed' in the background image settings.

TIA

Would running this as a background video work? There are plugins that add video controls to the background video.

9 minutes ago, Ziggy said:

Would running this as a background video work? There are plugins that add video controls to the background video.

It needs to automatically play on loop in the background with no controls. If it wasn't complex I would consider an animated GIF.

So it needs to have the following on screen when a user opens the page:

1. site header (navigation + logo)
2. video background filling full width + height (regardless of browser size) with a text and button block over the top

35 minutes ago, sanchez_77 said:

1. site header (navigation + logo)
2. video background filling full width + height (regardless of browser size) with a text and button block over the top

Unless I'm missing something, this sounds like you want a standard background section with a background video, section set to Large (100vh) with a text block and a button block. 

4 minutes ago, Ziggy said:

Unless I'm missing something, this sounds like you want a standard background section with a background video, section set to Large (100vh) with a text block and a button block. 

essentially yes. Is it possible to target just the background video element and set it to fill the browser height and width, leaving the text and button blocks intact?

Apologies if i'm being dumb but when I use the default built in settings (7.1) the temporary image fills the width, but never scales the height correctly!

Are you using a background video? Or a video block? A background video fills the space by default, and doesn't affect the placement of any blocks within the section.

37 minutes ago, Ziggy said:

Are you using a background video? Or a video block? A background video fills the space by default, and doesn't affect the placement of any blocks within the section.

i'm using a background video/image so assumed it would fill the width and height but it only fills the width.

Block>Edit section>Background>Video

With background with = full bleed

Can you share where this is happening, because I have never seen a background video not fill the height and width, that's what backgrounds do.

You haven't done this and added black bars have you?

16 hours ago, sanchez_77 said:

something really deep (1920x4000)

59 minutes ago, Ziggy said:

Can you share where this is happening, because I have never seen a background video not fill the height and width, that's what backgrounds do.

You haven't done this and added black bars have you?

 

Happy to share a link but it's not content for a public domain (just yet) which makes things a bit more complicated...

>You haven't done this and added black bars have you?

No, it was just a thought and I appreciate this is unlikely to work, especially as the video will be hosted externally on Vimeo or YT. This means the video will be 1920x1080 and will need some code to stretch it both vertically and horizontally to fill the browser as necessary

1 hour ago, Ziggy said:

There's no need for code, watch this video, the end where you can see the resizing has a black background hiding my desktop, but the area you can see is the browser which is being resized to demonstrate it covering the viewport completely.

https://www.loom.com/share/5215002324ab418ca83f6c58c401e6dd

literally awesome. I think I was missing the 'L' option and centering setting. I'll refer back to this movie in the next day or two once my header movie is complete.

Really appreciate your perseverance.

Brilliant, I'm glad you know how to achieve this!

If you could mark my post as the solution to your posting and give a thumbs that would be great!