Jump to content

Resizing video to fit the screen

Go to solution Solved by tuanphan,

Recommended Posts

I have a video that automatically plays on my homepage, but the bottom of the video appears below the frame so that I have to scroll down to see the bottom of the video.

How can I make the video's section automatically resize to fit within the screen for whichever screen size it's being viewed on? 

Any help would be greatly appreciated. 

Link to comment
  • Replies 9
  • Views 922
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
On 6/26/2023 at 10:25 AM, DameTheStoic said:

https://www.damienbabington.com/

Here it is. I entered the URL when I opened the discussion, so I don't know why they don't include it. 

Try adding to Design > Custom CSS

[data-section-id="648d6205bebe087d131d99e8"] {
    min-height: unset !important;
    height: 100vh !important;
}

 

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...
On 6/27/2023 at 5:27 PM, tuanphan said:

Try adding to Design > Custom CSS

[data-section-id="648d6205bebe087d131d99e8"] {
    min-height: unset !important;
    height: 100vh !important;
}

 

I replaced the block's video with a new video, and it reset the design of the block, so now this is no longer working. The video extends below the size of the screen, and there's a gap between the top of the video and the top of the screen.

This is what I have in CSS:

[data-section-id="648d6205bebe087d131d99e8"] {
    padding-top: 0px !important;
}

[data-section-id="648d6205bebe087d131d99e8"] {
    min-height: unset !important;
    height: 100vh !important;
}

#collection-6364ae99de39e2421280eac5 #header {
  position: fixed !important;
  z-index: 1000;
}

 

Link to comment
On 7/6/2023 at 7:44 AM, DameTheStoic said:

I replaced the block's video with a new video, and it reset the design of the block, so now this is no longer working. The video extends below the size of the screen, and there's a gap between the top of the video and the top of the screen.

This is what I have in CSS:

[data-section-id="648d6205bebe087d131d99e8"] {
    padding-top: 0px !important;
}

[data-section-id="648d6205bebe087d131d99e8"] {
    min-height: unset !important;
    height: 100vh !important;
}

#collection-6364ae99de39e2421280eac5 #header {
  position: fixed !important;
  z-index: 1000;
}

 

I don't see gap in top of video. You mean this black gap?

image.thumb.png.6f26cbaa14982d61fd069e23040f820b.png

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
20 hours ago, tuanphan said:

I'm not sure why it's appearing differently on my Windows PC, but I just checked on my Macbook, and it looks correct on there, so I guess I won't worry about it. 

When you get a chance, could you check this issue as well, please? 

https://forum.squarespace.com/topic/190090-creating-dropdown-menu-without-a-folder/#comment-64272

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.