sanchez_77 Posted January 24 Share Posted January 24 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
Ziggy Posted January 24 Share Posted January 24 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 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
sanchez_77 Posted January 24 Author Share Posted January 24 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
Ziggy Posted January 24 Share Posted January 24 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 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
sanchez_77 Posted January 24 Author Share Posted January 24 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
Ziggy Posted January 24 Share Posted January 24 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 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
sanchez_77 Posted January 24 Author Share Posted January 24 (edited) 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 January 24 by sanchez_77 Link to comment
Ziggy Posted January 25 Share Posted January 25 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 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
sanchez_77 Posted January 25 Author Share Posted January 25 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 Ziggy Posted January 25 Solution Share Posted January 25 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 sanchez_77 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
sanchez_77 Posted January 25 Author Share Posted January 25 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. Ziggy 1 Link to comment
Ziggy Posted January 25 Share Posted January 25 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! sanchez_77 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment