Jump to content

Need help replacing Banner Images with Banner Videos

Recommended Posts

Five years ago I built a website showcasing various buildings at a local ski resort. I used the Fairfield template in the Brine family. Each building had a page within an index so that you could seamlessly scroll from one page to another yet at the same time each page would show up in search independently. At the top of each page was an image banner with an image the full width of the page but cropped to a certain height. Overtop of the image was a header — the building name. 

More recently, I got the idea to replace those image banners at the top of each page with a video banner. Failed attempt #1. I couldn't figure out exactly how to do this so I created two pages for each building: (1) a page with the building name only and the YouTube hosted banner video uploaded in the Media section as a background, and (2) a page with all other content. I thought this was a great solution until I realized that when the page shows up in search there is no banner and pages I had converted were rarely showing in search because they now no longer had an h1 header with the building name. 

Ideally there is a way to add a Code Block and embed the YouTube video, crop it just like I did with the original image banner and overlay the header, while keeping it all responsive. I've been successful at the embed, the responsiveness (at first), ensure autoplay and loop on the video, and to some degree I've been able to crop and overlay the building name. But that's where it goes wrong... in the end I'm left with a mess that I just can't figure out. I'm not a web developer or coder so I understand some basics and can copy and paste some code but this has gone over my head and I'm lost and frustrated and now investing way too much time on something that I am confident someone is reading thinking, "this is so easy." Please someone help!

I've also noticed that I need to make sure that the page shows properly both on it's own and when included in the index. URL to the page I've been testing this on is included in this post.

Link to comment
  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.