Evan Lemmons Evan Lemmons - 19 days ago 7
CSS Question

Resizing Squarespace header image container doesn't resize image inside

I've noticed when I try to resize the container of a header image or video on Squarespace, it doesn't resize the video or image inside of it. For example, on https://forgwinnett.org it looks like the video is only taking up half of the landing screen but it's actually not - the video is still rending at 100% view width and height but I'm covering up half of it.

This kind of stinks and isn't specific to this particular template. I would love to know how to make the video/image responsive.

div[data-url-id="pledge"] div.title-desc-wrapper.over-image.has-main-image.has-background-video {
height: 55vh;
}


This resizes the video container, but the video or image doesn't resize with it.

Answer

The problem is that your <iframe> element inherits the following:

.sqs-video-background .background-video {
  min-height: 100%;
  ...
}

This means that no matter what height value you specify, the minimum height of your <iframe> element must be at least 100% of the parent element... which itself is absolutely positioned and has a height of 100%, making it fill the entire page.

Based on your use of height: 55vh !important on your .title-desc-wrapper element, I can only assume that you're wanting your <iframe> element to have a 55vh height. To achieve that simply:

  1. Reset the min-height from your <iframe> element to initial.
  2. Add a height of 55vh to your <iframe> element.

Now depending on whether you want this to display behind your page <header> or not, you'll need to either offset your <iframe> element's height by the height of your <header> (using calc(55vh + ...)) or adjust the top property to push the <iframe> element down so that this no longer happens.

You'll end up with something which looks like this:

Output