Jump to content

Full browser height video in header

Go to solution Solved by Ziggy,

Recommended Posts

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

Link to comment

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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

 

Link to comment
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. 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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!

Link to comment

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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

Edited by sanchez_77
Link to comment

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)

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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

Link to comment
  • Solution

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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.

Link to comment

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!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.