Jump to content

Full Window (Height + Width) Video Banner

Recommended Posts

I'd like specific pages to have a full-screen landing video section. I want this video (or photo in other cases) to fill the entire window of the user. So regardless of the window size the video/photo will adjust so that the first section fills the entire screen (width and height). 

What code injection would I use for this and would I put it in the page header code injection or the design custom CSS setting?

Edited by joeshmoe
Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

5 hours ago, AIHMN said:

Following! But with the question of how to adjust the width of my background video to be aligned "inset" with all of my other blocks. Any thoughts, @tuanphan? Thank you! 

Screen Shot 2022-04-03 at 8.40.57 PM.png

Can you share link to page in screenshot? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

Easy.

1) Add a section.

2) Add a video background with Full-bleed (not inset)

 

image.thumb.jpeg.58f847089fce5ed10ed66ca356a21337.jpeg

3) For section height choose L. 

image.thumb.jpeg.6525fdb111849225ac0fc4f7443bb58b.jpeg

Then it will be full-width and the height will be browser height. 

P.S For making full-width blocks you can try this plugin. 

(However in this case when you need a full-height and full-width section the built-in features should do it.

Edited by codeandtonic

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

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.