3

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.

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
Evan Lemmons
  • 807
  • 3
  • 11
  • 27

4 Answers4

1

Your iframe is set to a specific width:

<iframe id="vimeoplayer" class="background-video ready" src="//player.vimeo.com/video/181653249?api=1&amp;background=1" style="width: 2640px; height: 990px; left: -729px; top: 0px;"></iframe>

Note the style="width: 2640px; height: 990px; left: -729px; top: 0px;"

I note that the value for left changes when the screen size changes in order to center the iframe under the content.

You need to either:

  • Make the iframe the same width as the page (auto), or
  • Make one of the parent divs between the iframe and the video the same width as the page, and centered.
Darvanen
  • 626
  • 1
  • 9
  • 19
1

Use "iframe#vimeoplayer" as as selector to add your own css to affect video resizing.. Thanks

mustafa bagwala
  • 401
  • 5
  • 12
1

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

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
0

You need to append this style:

.sqs-video-background {
    height: 61vh;
}
emtei
  • 631
  • 8
  • 15