Jump to content

Can someone please help me make this video full bleed?

Recommended Posts

  • Replies 3
  • Views 452
  • Created
  • Last Reply

Top Posters In This Topic

On 8/7/2021 at 4:45 AM, nc1983 said:

Site URL: https://www.goldenllamaproductions.com

I would love for my demo reel video to be displayed like a full-bleed banner but with a play button and sound. I've seen it done before but cannot get it to work using the coding suggestions previously suggested in other discussions.

 

Thank you!!

 

https://www.goldenllamaproductions.com

You mean video under as featured on?

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

SOLVED:


For anyone who wants to turn a video block or gallery into a full bleed image/thumbnail before the video is played, I have figured out a workaround without CSS code unless you want to change the play button like me. I used CSS to make a larger play button which is easy to google. 

This full-bleed video solution I have come up with is WAY more simple than all the code injection options I've seen.

Simply create a video block or gallery on a fresh page using an Index, so that you can set a background banner image on your page. 

Set your desired video thumbnail image that you want to be full screen/ full-bleed as the background banner image. 

Then add your video block/gallery on top of you banner image. 

Obviously your video block now blocks part of the banner image BUT if you upload a custom BLANK transparent .png that has NO IMAGE on it as your video thumbnail, your video block will now become transparent except for the play button!

Now you have what looks like a full bleed video that scales with your browser, and plays at the correct resolution with sound!


See example here:

https://www.goldenllamaproductions.com/multicare-brand-evolution

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.