Jump to content

Increase page header video banner to 100% of video height?

Recommended Posts

Site URL: https://www.eyewell.se/where-the-heart-is

Hi!

I haven't found a solution to this just yet so i thought i would ask you guys.

Is there any way to use the code injection to fix the video height to 100%? I would rather have the site cutting out the sides than top and bottom of the video. 

It is quite an old site using the Bedford template. It would be great to have a quick fix using the code injection instead of having to upgrade the site and deal with the changes that comes with that 🙂

Hopeful for some assistance!

Screenshot 2021-01-20 at 17.11.58.png

Link to comment
  • Replies 4
  • Views 370
  • Created
  • Last Reply
On 1/23/2021 at 1:16 PM, tuanphan said:

Add to Design > Custom CSS



body#collection-5f9e9b519e7da9554f41be8e .banner-thumbnail-wrapper {
    min-height: 100vh !important;
}

 

Great thank you! It seems to be working but only on one of the pages, do you know any solution for this? 

It also seems like the video hight is a lot larger than my screen, do you know of a way to get it to 100% of screen resolution hight or something. I know its possible to do so with a headers of index pages, but not sure about the set up my page currently is in. Maybe a work around could be to create Index pages for each of the sub-pages, but that is tons of work 😞

It's currently working on www.eyewell.se/where-the-heart-is but not on any of the others.

Link to comment
23 hours ago, tuanphan said:

Hi. Sorry for the delay. I was off some days. Do you still need help on this?

Hi 🙂

No worries, yes please if you have a solution 🙂 

I tried to create a workaround and use an Index page as a start and include the video there. In another site i have created (www.tas.se) it works fine this way and i can adjust the vh to 100% in the site style. But this wont work in eyewell.se for some reason.

So if you have a code that can mimic the look and effect of what we see on www.tas.se that would be amazing. 

Now it only works on www.eyewell.se/where-the-heart-is and it the height is greater than the screen resolution.

/CF

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.