Jump to content

Full screen video

Recommended Posts

  • 1 year later...
  • Replies 3
  • Views 1.7k
  • Created
  • Last Reply

Top Posters In This Topic

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

Did you ever figure this out? Trying to do the same thing.

 

On 7/10/2020 at 5:05 AM, jasminesarian said:

Is there a way to achieve embedding a vimeo clip into a video block full screen like this: https://visionaireworld.com/

Do not want the background video option (we want the ability to pause, hear audio, change volume, and watch on mobile).

Working on 7.0 - and ideally do not want the margins on a regular empty index page with a video block. Hope that makes sense. 

Hi. You can use Video Plugin to achieve this.

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

 

Screen Shot 2021-08-10 at 3.12.44 PM.png

Edited by nc1983
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.